Module communautaire génial

nomnoml

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

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

Nomnoml was made possible by these cool projects

Bibliothèque

La bibliothèque javascript nomnoml autonome 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 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 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 entièrement présenté) est disponible en tant nomnoml.renderSvg fonction nomnoml.renderSvg .

Interface de ligne de commande

dist/nomnoml-cli.js expose le rendu SVG avec une interface en 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 simple éditeur avec un aperçu en direct. Elle est purement côté client et les modifications sont enregistrées dans le localStorage du navigateur, donc votre diagramme devrait être là la prochaine fois, (mais sans garantie).

Interaction

Le canevas peut être panoramique et zoomé en faisant glisser et faire défiler dans 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 motif 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 .