nomnoml
こんにちは、これはnomnomlです。これは、単純な構文に基づいてUML図を描画するためのツールです。ASCII描画に頼ることなく、生成されたUML図にできるだけ視覚的に近い構文を維持しようとします。
作成されたダニエルKallinによる。貢献アレクサンダー・ムースブラガーとkorroz。
Nomnoml was made possible by these cool projects
図書館
nomnomlのスタンドアロンのJavaScriptライブラリは、自分のWebページ上の図を描画するために使用することができます。唯一の依存関係がありlodashとdagre。いずれかを使用して、それをインストールし、NPMまたは古き良きスクリプトを含めることを。
SVG出力でのNodeJSの使用法:
1
2
3
4
5npm 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
17visual=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
6center
bold
underline
italic
dashed
empty
貢献
プロジェクトに貢献したい場合は、詳細情報をご覧ください。 CONTRIBUTING.md。