Module communautaire génial

nomnoml

Bonjour, c'est nomnoml , un outil pour dessiner des diagrammes UML basé sur une syntaxe simple qui essaie de garder sa syntaxe visuellement aussi proche que possible du diagramme UML généré sans recourir à des dessins ASCII.

Créé par Daniel Kallin, contributions d' Alexander Moosbrugger et de Korroz .

Nomnoml was made possible by these cool projects

Bibliothèque

La bibliothèque javascript autonome nomnoml peut être utilisée pour afficher des diagrammes sur votre propre page Web. Les seules dépendances sont lodash et dagre . Installez-la en utilisant soit npm, soit une bonne ancienne inclusion de script.

Utilisation de NodeJS avec sortie SVG:

1 2 3 4 5
npm install nomnoml var nomnoml = require('nomnoml'); var src = '[nomnoml] is -> [awesome]'; console.log(nomnoml.renderSvg(src));

Utilisation du HTML avec une cible de rendu Canvas:

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>

Prise en charge SVG

Un mode de rendu SVG expérimental (et non complet) est disponible sous la nomnoml.renderSvg fonction nomnoml.renderSvg .

Interface de ligne de commande

dist/nomnoml-cli.js expose le moteur de rendu SVG avec une interface de ligne de commande. Ce mode prend également en charge la directive #import: <filename> qui vous permet de séparer des diagrammes complexes en plusieurs fichiers.

application Web

L'application web nomnoml est un éditeur simple avec un aperçu en direct. Il est purement côté client et les modifications sont enregistrées dans le localStorage du navigateur, donc votre diagramme devrait être ici la prochaine fois (mais aucune garantie).

Interaction

Le canevas peut être déplacé et zoomé en faisant glisser et en faisant défiler le tiers droit du canevas. Les fichiers image téléchargés recevront le nom de fichier dans la directive #title .

Example

Voici à quoi ressemble le modèle Decorator dans la syntaxe nomnoml:

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

Directives disponibles uniquement lors de l'utilisation de l'interface de ligne de commande

1
#import: my-common-styles.nomnoml

Custom classifier styles

Une directive commençant par "." Définit un style de classificateur.

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

Les visuels disponibles sont

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

Les modificateurs disponibles sont

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

Contribuant

Si vous souhaitez contribuer au projet, plus d'informations sont disponibles dans CONTRIBUTING.md .