- Notifications
You must be signed in to change notification settings - Fork210
The sassy UML diagram renderer
License
skanaar/nomnoml
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Hello, this isnomnoml, a tool for drawing UML diagrams based on a simple syntax. It tries to keep its syntax visually as close as possible to the generated UML diagram without resorting to ASCII drawings.
Created byDaniel Kallin with help from a group ofcontributors.
Thenomnoml javascript library can render diagrams on your web page. The only dependency isgraphre. Install nomnoml using eithernpm or good old script inclusion.
npm install nomnomlvarnomnoml=require('nomnoml')varsrc='[nomnoml] is -> [awesome]'console.log(nomnoml.renderSvg(src))
In the SVG output the node name is attached to SVG shapes and<g> containers withdata-name attribute. You can use this to implement interactive diagrams.
document.querySelector('svg').onclick=function(e){console.log(e.target.closest('g[data-name]')?.attributes['data-name'])}
<scriptsrc="//unpkg.com/graphre/dist/graphre.js"></script><scriptsrc="//unpkg.com/nomnoml/dist/nomnoml.js"></script><canvasid="target-canvas"></canvas><script>varcanvas=document.getElementById('target-canvas')varsource='[nomnoml] is -> [awesome]'nomnoml.draw(canvas,source)</script>
npx nomnoml exposes the SVG renderer with a command-line interface. This mode also supports the#import: <filename> directive for dividing complex diagrams into multiple files.
npx nomnoml input-file.nomlThenomnoml web application is a simple editor with a live preview. It is purely client-side and uses your browser'slocalStorage, so your diagram should be here the next time you visit (but no guarantees).
This is how the Decorator pattern can look in nomnoml syntax:
[<frame>Decorator pattern| [<abstract>Component||+ operation()] [Client] depends --> [Component] [Decorator|- next: Component] [Decorator] decorates -- [ConcreteComponent] [Component] <:- [Decorator] [Component] <:- [ConcreteComponent]]- association-> association<-> association--> dependency<--> dependency-:> generalization<:- generalization--:> implementation<:-- implementation+- composition+-> compositiono- aggregationo-> aggregation-o) ball and socketo<-) ball and socket->o ball and socket-- note-/- hidden[name][<abstract> name][<instance> name][<reference> name][<note> name][<package> name][<frame> name][<database> name][<pipe> name][<start> name][<end> name][<state> name][<choice> name][<sync> name][<input> name][<lollipop> lollipop][<sender> name][<socket> socket][<receiver> name][<transceiver> name][<actor> name][<usecase> name][<label> name][<hidden> name][<table> name| a | 5 || b | 7]Comments are supported at the start of a line.
//[commented][not //commented]Two distinct nodes can have the same display name with the id attribute.
[<actor id=a>User][<actor id=b>User][a] -- [b]#import: my-common-styles.nomnoml#arrowSize: 1#bendSize: 0.3#direction: down | right#gutter: 5#edgeMargin: 0#gravity: 1#edges: hard | rounded#background: transparent#fill: #eee8d5; #fdf6e3#fillArrows: false#font: Calibri#fontSize: 12#leading: 1.35#lineWidth: 3#padding: 8#spacing: 40#stroke: #33322E#title: filename#zoom: 1#acyclicer: greedy#ranker: network-simplex | tight-tree | longest-pathA directive that starts with "." define a classifier style. The style is written as a space separated list of modifiers and key/value pairs.
#.box: fill=#8f8 dashed#.blob: visual=ellipse title=bold[<box> GreenBox][<blob> HideousBlob]Modifiers
dashedemptyKey/value pairs
fill=(any css color)stroke=(any css color)align=centeralign=leftdirection=rightdirection=downvisual=actorvisual=classvisual=databasevisual=ellipsevisual=endvisual=framevisual=hiddenvisual=inputvisual=nonevisual=notevisual=packagevisual=pipevisual=receivervisual=rhombvisual=roundrectvisual=sendervisual=startvisual=tablevisual=transceiverStyle title and text body with a comma separated list of text modifiers
title=left,italic,boldbody=center,italic,boldText modifiers
boldcenteritalicleftunderlineIf you want to contribute to the project, more info is available inCONTRIBUTING.md.
About
The sassy UML diagram renderer
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Uh oh!
There was an error while loading.Please reload this page.