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
Bücherei
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
5npm 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.js
stellt 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 #title
Direktive.
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
17visual=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
6center
bold
underline
italic
dashed
empty
Beitragen
Wenn Sie zum Projekt beitragen möchten, finden Sie weitere Informationen in CONTRIBUTING.md.