Fantastisches Community-Modul

nomnoml

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

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 mit einem guten alten Skript.

NodeJS-Verwendung 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

Ein experimenteller (und nicht vollständig ausgestatteter) SVG-Rendering-Modus ist als nomnoml.renderSvg Funktion verfügbar.

Befehlszeilenschnittstelle

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

Webanwendung

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 (jedoch keine Garantie).

Interaction

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

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

Anweisungen sind nur bei Verwendung der Befehlszeilenschnittstelle verfügbar

1
#import: my-common-styles.nomnoml

Custom classifier styles

Eine Direktive, die mit "." Beginnt. Definieren Sie einen Klassifikatorstil.

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

Verfügbare Grafiken 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 in CONTRIBUTING.md .