Impresionante módulo de comunidad

nomnoml

Hola, esto es nomnoml , una herramienta para dibujar diagramas UML basados ​​en una sintaxis simple. Intenta mantener su sintaxis visual 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

Biblioteca

La biblioteca independiente de JavaScript nomnoml se puede utilizar para representar diagramas en su propia página web. Las únicas dependencias son lodash y dagre . Instálelo usando npm o una buena inclusión de scripts antiguos.

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 representación 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 completamente presentado) está disponible como la función nomnoml.renderSvg .

Interfaz de línea de comando

dist/nomnoml-cli.js expone el renderizador SVG con una interfaz de línea de comandos.Este modo también admite la directiva #import: <filename> 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 almacenamiento local del navegador, por lo que su diagrama debería estar aquí la próxima vez (pero sin garantías).

Interaction

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

Example

Así es como se ve el patrón Decorator 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 "." Definir un estilo 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 desea contribuir al proyecto, hay más información disponible en CONTRIBUTING.md .