Потрясающий модуль сообщества

нономл

Здравствуйте, это nomnoml , инструмент для рисования UML-диаграмм на основе простого синтаксиса. Он пытается визуально сохранить свой синтаксис как можно ближе к сгенерированной UML-диаграмме, не прибегая к рисованию ASCII.

Создано Дэниелом Каллиным При участии Александра Моосбругера и Корроза .

Nomnoml was made possible by these cool projects

Библиотека

Автономную библиотеку javascript nomnoml можно использовать для отображения диаграмм на вашей собственной веб-странице. Единственные зависимости — lodash и dagre . Установите ее, используя npm или старый добрый скрипт.

Использование NodeJS с выводом SVG:

1 2 3 4 5
npm install nomnoml var nomnoml = require('nomnoml'); var src = '[nomnoml] is -> [awesome]'; console.log(nomnoml.renderSvg(src));

Использование HTML с целью рендеринга 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>

Поддержка SVG

В качестве функции доступен экспериментальный (и не полнофункциональный) режим рендеринга SVG nomnoml.renderSvg.

Интерфейс командной строки

dist/nomnoml-cli.jsпредоставляет средству визуализации SVG интерфейс командной строки. Этот режим также поддерживает директивы #import: <filename>, которые позволяют разделять сложные диаграммы на несколько файлов.

веб приложение

Веб -приложение nomnoml представляет собой простой редактор с предварительным просмотром в реальном времени. Это чисто клиентская часть, изменения сохраняются в localStorage браузера , поэтому ваша диаграмма должна быть здесь в следующий раз (но никаких гарантий).

Interaction

Холст можно панорамировать и масштабировать, перетаскивая и прокручивая правую треть холста. Загруженным файлам изображений в директиве будет присвоено имя файла #title.

Example

Вот как выглядит шаблон Decorator в синтаксисе 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

Директивы доступны только при использовании интерфейса командной строки.

1
#import: my-common-styles.nomnoml

Custom classifier styles

Директива, начинающаяся с «.», определяет стиль классификатора.

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

Доступные визуальные эффекты:

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

Доступные модификаторы:

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

Содействие

Если вы хотите внести свой вклад в проект, дополнительная информация доступна вCONTRIBUTING.md.