The sassy UML diagram renderer
JavaScript CSS HTML
Permalink
Failed to load latest commit information.
codemirror file structure cleanup Jun 14, 2015
design documentation, cleanup of css Jun 16, 2015
dist command line interface with #import support Jun 18, 2016
img documentation, cleanup of css Jun 16, 2015
lib documentation, cleanup of css Jun 16, 2015
test Merge branch 'svg' Apr 18, 2016
.gitignore command line interface with #import support Jun 18, 2016
.jshintrc codemirror editor instead of raw <textarea> Jun 8, 2015
CONTRIBUTING.md npm publishable package, build script Jun 7, 2015
LICENSE added license Jun 3, 2014
README.md user defined classifier styles Jun 18, 2016
bower.json Fix bower.json, broken json Jun 7, 2015
build.js Merge branch 'svg' Apr 18, 2016
bundleWrapper.js Merge branch 'svg' Apr 18, 2016
favicon.png nomnoml promoted to its own repository Jun 3, 2014
index.html user defined classifier styles Jun 18, 2016
nomnoml.app.js missing blank space in confirm save prompt Jun 16, 2015
nomnoml.css documentation and test cases Apr 18, 2016
nomnoml.jison Merge branch 'master' into svg Apr 18, 2016
nomnoml.jison.js Merge branch 'master' into svg Apr 18, 2016
nomnoml.js user defined classifier styles Jun 18, 2016
nomnoml.layouter.js npm publishable package, build script Jun 7, 2015
nomnoml.parser.js npm publishable package, build script Jun 7, 2015
nomnoml.renderer.js user defined classifier styles Jun 18, 2016
package.json command line interface with #import support Jun 18, 2016
sample.nomnoml user defined classifier styles Jun 18, 2016
skanaar.canvas.js Merge branch 'svg' Apr 18, 2016
skanaar.svg.js Merge branch 'svg' Apr 18, 2016
skanaar.util.js npm publishable package, build script Jun 7, 2015
skanaar.vector.js npm publishable package, build script Jun 7, 2015

README.md

nomnoml

Hello, this is nomnoml, 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 by Daniel Kallin. Contributions by Alexander Moosbrugger and korroz.

Nomnoml was made possible by these cool projects

Library

The nomnoml standalone javascript library can be used to render diagrams on your own web page. The only dependencies are lodash and dagre. Install it using either npm or good old script inclusion.

NodeJS usage with SVG output:

npm install nomnoml

var nomnoml = require('nomnoml');
var src = '[nomnoml] is -> [awesome]';
console.log(nomnoml.renderSvg(src));

Html usage with a Canvas rendering target:

<script src="lodash.js"></script>
<script src="dagre.js"></script>
<script src="nomnoml.js"></script>

<canvas id="target-canvas"></canvas>
<script>
    var canvas = document.getElementById('target-canvas');
    var source = '[nomnoml] is -> [awesome]';
    nomnoml.draw(canvas, source);
</script>

SVG support

An experimental (and not fully featured) SVG rendering mode is available as the nomnoml.renderSvg function.

Web application

The nomnoml web application is a simple editor with a live preview. It is purely client side and changes are saved to the browser's localStorage, so your diagram should be here the next time, (but no guarantees).

Interaction

The canvas can be panned and zoomed by dragging and scrolling in the right hand third of the canvas. Downloaded image files will be given the filename in the #title directive.

Example

This is how the Decorator pattern looks like in nomnoml syntax:

[<frame>Decorator pattern|
  [<abstract>Component||+ operation()]
  [Client] depends --> [Component]
  [Decorator|- next: Component]
  [Decorator] decorates -- [ConcreteComponent]
  [Component] <:- [Decorator]
  [Component] <:- [ConcreteComponent]
]

Association types

-    association
->   association
<->  association
-->  dependency
<--> dependency
-:>  generalization
<:-  generalization
--:> implementation
<:-- implementation
+-   composition
+->  composition
o-   aggregation
o->  aggregation
--   note
-/-  hidden

Classifier types

[name]
[<abstract> name]
[<instance> name]
[<reference> name]
[<note> name]
[<package> name]
[<frame> name]
[<database> name]
[<start> name]
[<end> name]
[<state> name]
[<choice> name]
[<input> name]
[<sender> name]
[<receiver> name]
[<actor> name]
[<usecase> name]
[<label> name]
[<hidden> name]

Directives

#arrowSize: 1
#bendSize: 0.3
#direction: down | right
#gutter: 5
#edgeMargin: 0
#edges: hard | rounded
#fill: #eee8d5; #fdf6e3
#fillArrows: false
#font: Calibri
#fontSize: 12
#leading: 1.25
#lineWidth: 3
#padding: 8
#spacing: 40
#stroke: #33322E
#title: filename
#zoom: 1

Custom classifier styles

A directive that starts with "." define a classifier style.

#.box: fill=#88ff88
#.blob: fill=pink visual=ellipse italic bold dashed
[<box> GreenBox]
[<blob> HideousBlob]

Available visuals are

visual=actor
visual=class
visual=database
visual=ellipse
visual=end
visual=frame
visual=hidden
visual=input
visual=none
visual=note
visual=package
visual=receiver
visual=rhomb
visual=roundrect
visual=sender
visual=start

Available modifiers are

center
bold
underline
italic
dashed
empty

Contributing

If you want to contribute to the project more info is available in CONTRIBUTING.md.