Tolles Community-Modul

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 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.