Module communautaire génial

nomnom

Bonjour, il s'agit de nomnoml , un outil de dessin de diagrammes UML basé sur une syntaxe simple. Il essaie de garder visuellement sa syntaxe aussi proche que possible du diagramme UML généré sans recourir à des dessins ASCII.

Créé par Daniel Kallin Contributions d' Alexander Moosbrugger et Korroz .

Nomnoml was made possible by these cool projects

Une 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 à l'aide de npm ou d'une bonne vieille 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 de 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 de SVG

Un mode de rendu SVG expérimental (et non complet) est disponible en tant que nomnoml.renderSvgfonction.

Interface de ligne de commande

dist/nomnoml-cli.jsexpose le moteur de rendu SVG avec une interface en ligne de commande. Ce mode prend également en charge la #import: <filename>directive 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. C'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 panoramique 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 #titledirective.

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