nomnoml

Hallo, dies ist nomnoml , ein Werkzeug zum Zeichnen von UML-Diagrammen auf Basis einer einfachen Syntax, das versucht, seine Syntax visuell so nah wie möglich am generierten UML-Diagramm zu halten, ohne auf ASCII-Zeichnungen zurückzugreifen.

Erstellt von Daniel Kallin, Beiträge von Alexander Moosbrugger und korroz .

Nomnoml was made possible by these cool projects

• jison
• dagre
• lodash
• Typikonen
• zepto
• Codespiegel
• solarisiert

Bibliothek

Die eigenständige Javascript-Bibliothek nomnoml kann verwendet werden, um Diagramme auf Ihrer eigenen Webseite zu rendern. Die einzigen Abhängigkeiten sind lodash und dagre . Installieren Sie sie entweder mit npm oder der guten alten Skripteinbindung .

NodeJS-Nutzung mit SVG-Ausgabe:

1
2
3
4
5
npm install nomnoml

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

HTML-Verwendung mit einem Canvas-Rendering-Ziel:

1
2
3
4
5
6
7
8
9
10
<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-Unterstützung

Als Funktion steht ein experimenteller (und nicht voll funktionsfähiger) SVG-Rendering-Modus zur Verfügung nomnoml.renderSvg.

Befehlszeilenschnittstelle

dist/nomnoml-cli.jsstellt den SVG-Renderer mit einer Befehlszeilenschnittstelle bereit.Dieser Modus unterstützt auch die #import: <filename>Direktive, mit der Sie komplexe Diagramme in mehrere Dateien aufteilen können.

Internetanwendung

Die nomnoml- Webanwendung ist ein einfacher Editor mit Live-Vorschau, rein clientseitig und Änderungen werden im localStorage des Browsers gespeichert , sodass Ihr Diagramm das nächste Mal hier sein sollte (aber keine Garantie).

Interaction

Der Canvas kann durch Ziehen und Scrollen im rechten Drittel des Canvas geschwenkt und gezoomt werden Heruntergeladene Bilddateien erhalten den Dateinamen in der #titleDirektive.

Example

So sieht das Decorator-Muster in der Nomnoml-Syntax aus:

1
2
3
4
5
6
7
8
[<frame>Decorator pattern|
  [<abstract>Component||+ operation()]
  [Client] depends --> [Component]
  [Decorator|- next: Component]
  [Decorator] decorates -- [ConcreteComponent]
  [Component] <:- [Decorator]
  [Component] <:- [ConcreteComponent]
]

Association types

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
-    association
->   association
<->  association
-->  dependency
<--> dependency
-:>  generalization
<:-  generalization
--:> implementation
<:-- implementation
+-   composition
+->  composition
o-   aggregation
o->  aggregation
--   note
-/-  hidden

Classifier types

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
[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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#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

Direktiven nur verfügbar, wenn die Befehlszeilenschnittstelle verwendet wird

1
#import: my-common-styles.nomnoml

Custom classifier styles

Eine Direktive, die mit "." beginnt, definiert einen Klassifikatorstil.

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

Verfügbare Visuals sind

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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

Verfügbare Modifikatoren sind

1
2
3
4
5
6
center
bold
underline
italic
dashed
empty

Beitragen

Wenn Sie zum Projekt beitragen möchten, finden Sie weitere Informationen in CONTRIBUTING.md.