nomnoml

You can install nomnoml via npm for use in NodeJS environments or include it via script tags for web applications.

npm install nomnoml

To render a diagram directly onto an HTML <canvas> element, ensure graphre and nomnoml are loaded, then use nomnoml.draw(canvas, source).

<script src="//unpkg.com/graphre/dist/graphre.js"></script>
<script src="//unpkg.com/nomnoml/dist/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>

Use nomnoml.renderSvg(src) to convert a nomnoml syntax string into an SVG string. The resulting SVG includes data-name attributes on <g> containers, allowing you to identify nodes during interaction.

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

The Config interface defines the global styling and layout parameters for a nomnoml diagram. Key properties include:

• padding: Number for diagram padding.
• stroke: Default stroke color.
• font: Default font family.
• fontSize: Default font size.
• lineWidth: Default line width.
• styles: A dictionary of Style objects keyed by name.
• fill: An array of colors for node fills.
• background: Background color.
• edges: Edge color.
• direction: Layout direction, either 'TB' (Top-to-Bottom) or 'LR' (Left-to-Right).
• gravity: Layout gravity.
• spacing: Node spacing.
• acyclicer: Set to 'greedy' to enable the acyclic layout algorithm.
• ranker: A Ranker type for layout ranking.

Define custom styles for specific classifiers using a directive starting with .. A style consists of a space-separated list of modifiers and key/value pairs.

Modifiers

• dashed
• empty

Key/Value Pairs

• fill=(css color)
• stroke=(css color)
• align=(center|left)
• direction=(right|down)
• visual=(actor|class|database|ellipse|end|frame|hidden|input|none|note|package|pipe|receiver|rhomb|roundrect|sender|start|table|transceiver)

Text Styling

Use a comma-separated list for title and body modifiers:

• title=left,italic,bold
• body=center,italic,bold

Text modifiers: bold, center, italic, left, underline

Example:

#.box: fill=#8f8 dashed
[<box> GreenBox]

#.box: fill=#8f8 dashed
#.blob: visual=ellipse title=bold
[<box> GreenBox]
[<blob> HideousBlob]

Specify node types using the [<type> name] syntax. Common types include:

• [name] (standard)
• [<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> name]
• [<sender> name]
• [<socket> name]
• [<receiver> name]
• [<transceiver> name]
• [<actor> name]
• [<usecase> name]
• [<label> name]
• [<hidden> name]
• [<table> name| a | 5 || b | 7] (table with columns/rows)

Comments

Use // at the start of a line to add comments.

Id attribute

Use the id attribute to distinguish between nodes that share the same display name.

Example:

[<actor id=a>User]
[<actor id=b>User]
[a] -- [b]

//[commented]
[not //commented]

[<actor id=a>User]
[<actor id=b>User]
[a] -- [b]

Define relationships between nodes using the following association types:

• association: -, ->, <->
• dependency: -->, <-->
• generalization: -:>, <:-
• implementation: --:>, <:--
• composition: +-, +->
• aggregation: o-, o->
• ball and socket: -o), o<-), ->o
• note: --
• hidden: -/-

-    association
->   association
<->  association
-->  dependency
<--> dependency
-:>  generalization
<:-  generalization
--:>  implementation
<:-- implementation
+-   composition
+->  composition
o-   aggregation
o->  aggregation
-o)  ball and socket
o<-) ball and socket
->o  ball and socket
--   note
-/-  hidden

The npx nomnoml command provides a CLI to render SVG files from .noml input files. This mode supports the #import: <filename> directive for modularizing diagrams.

npx nomnoml input-file.noml

The GraphicsSvg instance provides several methods for drawing standard geometric shapes:

• circle(p: Vector, r: number): Draws a circle at position p with radius r.
• ellipse(center: Vector, w: number, h: number, [start: number], [stop: number]): Draws an ellipse. If start or stop are provided, it draws an arc.
• arc(cx: number, cy: number, r: number): Draws a circular arc.
• roundRect(x: number, y: number, width: number, height: number, r: number): Draws a rectangle with rounded corners.
• rect(x: number, y: number, width: number, height: number): Draws a standard rectangle.
• line(p1: Vector, p2: Vector): (Note: While not explicitly listed in the return object's visible methods in this snippet, standard graphics implementations usually include this; however, based strictly on this file, use beginPath and lineTo for lines).