素晴らしいコミュニティモジュール

nomnoml

こんにちは、これはnomnomlです。これは、単純な構文に基づいてUMLダイアグラムを描画するためのツールであり、ASCII図面に頼ることなく、生成されたUMLダイアグラムにできるだけ視覚的に近い構文を維持しようとします。

作成されたダニエルKallinによる。貢献アレクサンダー・ムースブラガーkorroz

Nomnoml was made possible by these cool projects

図書館

nomnomlのスタンドアロンのJavaScriptライブラリは、自分のWebページ上の図を描画するために使用することができます。唯一の依存関係がありlodashdagre 。どちらかNPMまたは古き良きスクリプトのインクルードを使用して、それをインストールします。

SVG出力でのNodeJSの使用法:

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

CanvasレンダリングターゲットでのHtmlの使用法:

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 Webアプリケーションは、ライブプレビューを備えたシンプルなエディターです。これは純粋にクライアント側であり、変更はブラウザーのlocalStorageに保存されるため、次回はダイアグラムをここに表示する必要があります(ただし保証はありません)。

Interaction

キャンバスの右3分の1をドラッグしてスクロールすると、キャンバスをパンおよびズームできます。ダウンロードした画像ファイルには、 #titleディレクティブでファイル名が指定されます。

Example

これは、デコレータパターンが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詳細情報を入手できます。