non nom

Bonjour, voici nomnoml , un outil de dessin de 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 recourir aux dessins ASCII.

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

Nomnoml was made possible by these cool projects

• jison
• jour
• lodash
• icônes typiques
• zepto
• codemiroir
• solarisé

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 npm ou 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 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 en tant que nomnoml.renderSvgfonction.

Interface de ligne de commande

dist/nomnoml-cli.jsexpose le moteur de rendu SVG avec une interface de 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 é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 , votre diagramme devrait donc être ici la prochaine fois (mais sans 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 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 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 dansCONTRIBUTING.md.