The sassy UML diagram renderer
JavaScript CSS HTML Other
Switch branches/tags
Nothing to show
Clone or download
Permalink
Failed to load latest commit information.
codemirror file structure cleanup Jun 14, 2015
design documentation, cleanup of css Jun 16, 2015
dist Added html escaping of the text and a viewbox attribute to the svg ex… May 16, 2018
img documentation, cleanup of css Jun 16, 2015
lib documentation, cleanup of css Jun 16, 2015
test Added html escaping of the text and a viewbox attribute to the svg ex… May 16, 2018
.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 Adds a "transceiver" visual combining "receiver" and "sender" in one … Oct 1, 2017
bower.json Fix bower.json, broken json Jun 7, 2015
build.js formalized classifier hull configuration Apr 12, 2017
bundleWrapper.js Merge branch 'svg' Apr 18, 2016
favicon.png nomnoml promoted to its own repository Jun 3, 2014
index.html Adds a "transceiver" visual combining "receiver" and "sender" in one … Oct 1, 2017
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 Added html escaping of the text and a viewbox attribute to the svg ex… May 16, 2018
nomnoml.js Allows to set direction in classifiers, independent of a global chart… Oct 1, 2017
nomnoml.layouter.js Allows to set direction in classifiers, independent of a global chart… Oct 1, 2017
nomnoml.parser.js npm publishable package, build script Jun 7, 2015
nomnoml.renderer.js Improved label placement and multiline labels (#60) Oct 1, 2017
nomnoml.visuals.js Adds a "transceiver" visual combining "receiver" and "sender" in one … Oct 1, 2017
package-lock.json Added html escaping of the text and a viewbox attribute to the svg ex… May 16, 2018
package.json improved text measurement heuristics for SVG layout Oct 1, 2017
sample-style.nomnoml command line utility Apr 9, 2017
sample.nomnoml command line utility Apr 9, 2017
server.sh improved text measurement heuristics for SVG layout Oct 1, 2017
skanaar.canvas.js Merge branch 'svg' Apr 18, 2016
skanaar.svg.js Added html escaping of the text and a viewbox attribute to the svg ex… May 16, 2018
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.

Command Line Interface

dist/nomnoml-cli.js exposes the SVG renderer with a command line interface. This mode also supports the #import: <filename> directive which allow you to separate complex diagrams into multiple files.

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]
[<transceiver> 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

Directives only available when using the command line interface

#import: my-common-styles.nomnoml

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
visual=transceiver

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.