nonoml

Hallo, dies ist nomnoml , ein Tool zum Zeichnen von UML-Diagrammen basierend auf einer einfachen Syntax. Es 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
• Typikone
• Zepto
• Codespiegel
• solarisiert

Bibliothek

Die eigenständige Javascript-Bibliothek nomnoml kann zum Rendern von Diagrammen auf Ihrer eigenen Webseite verwendet werden. 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-Nutzung 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 nomnoml.renderSvgFunktion steht ein experimenteller (und nicht vollständig ausgestatteter) SVG-Rendering-Modus zur Verfügung.

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 einer Live-Vorschau. Sie ist rein clientseitig und Änderungen werden im localStorage des Browsers gespeichert , sodass Ihr Diagramm beim nächsten Mal hier sein sollte (aber keine Garantie).

Interaction

Die Leinwand kann durch Ziehen und Scrollen im rechten Drittel der Leinwand geschwenkt und gezoomt werden. Heruntergeladene Bilddateien erhalten in der #titleAnweisung den Dateinamen.

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 sind 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 Bilder 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

Mitwirken

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