nonoml

Hola, esto es nomnoml , una herramienta para dibujar diagramas UML basada en una sintaxis simple, que intenta mantener su sintaxis visualmente lo más cerca posible del diagrama UML generado sin recurrir a dibujos ASCII.

Creado por Daniel Kallin Contribuciones de Alexander Moosbrugger y korroz .

Nomnoml was made possible by these cool projects

• jison
• dagre
• lodash
• típicos
• zepto
• código espejo
• solarizado

Biblioteca

La biblioteca javascript independiente nomnoml se puede usar para representar diagramas en su propia página web. Las únicas dependencias son lodash y dagre . Instálela usando npm o la inclusión de un script antiguo.

Uso de NodeJS con salida SVG:

1
2
3
4
5
npm install nomnoml

var nomnoml = require('nomnoml');
var src = '[nomnoml] is -> [awesome]';
console.log(nomnoml.renderSvg(src));

Uso de HTML con un objetivo de renderizado de 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>

soporte SVG

Un modo de renderizado SVG experimental (y no con todas las funciones) está disponible como nomnoml.renderSvgfunción.

Interfaz de línea de comando

dist/nomnoml-cli.jsexpone el renderizador SVG con una interfaz de línea de comando. Este modo también admite la #import: <filename>directiva que le permite separar diagramas complejos en múltiples archivos.

Aplicación web

La aplicación web nomnoml es un editor simple con una vista previa en vivo. Es puramente del lado del cliente y los cambios se guardan en el localStorage del navegador , por lo que su diagrama debería estar aquí la próxima vez (pero no hay garantías).

Interaction

El lienzo se puede desplazar y ampliar arrastrando y desplazándose en el tercio derecho del lienzo. Los archivos de imagen descargados recibirán el nombre de archivo en la #titledirectiva.

Example

Así es como se ve el patrón Decorador en la sintaxis 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

Directivas solo disponibles cuando se usa la interfaz de línea de comando

1
#import: my-common-styles.nomnoml

Custom classifier styles

Una directiva que comienza con "." define un estilo de clasificador.

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

Las imágenes disponibles son

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

Los modificadores disponibles son

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

Contribuyendo

Si quieres contribuir al proyecto hay más información disponible enCONTRIBUTING.md.