Graphviz Online
digraph G { subgraph cluster_0 { style=filled; color=lightgrey; node [style=filled,color=white]; a0 -> a1 -> a2 -> a3; label = "process #1"; } subgraph cluster_1 { node [style=filled]; b0 -> b1 -> b2 -> b3; label = "process #2"; color=blue } start -> a0; start -> b0; a1 -> b3; b2 -> a3; a3 -> a0; a3 -> end; b3 -> end; start [shape=Mdiamond]; end [shape=Msquare]; }
Web開発でもアプリ開発でも使える状態遷移図を自動生成するツールを作りました - Qiita
概要 先日こちらの記事でgraphvizを使って状態遷移図を作成する方法をご紹介したのですが、これでもまだ複雑で記述量も多いのでとっつきづらいと思い、このgraphvizのソースコードを自動生成して画像を出力するコマンドラインアプリケーションを作成しました。 このアプリケーションはPyagram（ぱいあぐらむ）といい、その名前から察しがつくかと思いますがPythonを使用して開発されました。開発期間は１日でした。 このPyagramを使うことで複雑な状態遷移図を比較的簡単に作成することができるようになりますので、以下でご紹介したいと思います。 状態遷移図の描き方についてはこちらの記事を参考にしています。 出来上がりの図は以下のような感じになります。 図には幾つかのオブジェクトがあります。 図のタイトル（最上段） ビュー（二重丸） サーバサイドの処理（灰色の背景の一重丸） 画面遷移（破線の矢
JavaScript AST Walker
JavaScript AST Walker JavaScript ASTを見て回る Agenda JavaScript ASTとは JS AST Structure JS AST as JSON Try JavaScript AST パーサ ジェネレーター ここまでのまとめ More detail コードカバレッジツール istanbul-html istanbul-karma blanket [ESLint](https://github.com/nzakas/eslint "ESLint") [reQUnit](https://github.com/azu/reQUnit "reQUnit") reQunit : before reQunit : after [regenerator](https://github.com/facebook/regenerator "regenerat
Liviz.js (JSViz)
digraph testgraph{ {node[shape=none, fontsize=23] "Welcome to Liviz.js!" } {node[shape=none] "Interactive GraphViz on your browser" } {edge[color=transparent] "Welcome to Liviz.js!" -> "Interactive GraphViz on your browser" } A -> B -> C -> D -> E; B -> D; {node[shape=box]; 1 -> 2 -> 3; } E -> 1;2 -> C; {rank=same; 1; A;} {rank=same; 3; D;} } Test
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Graphviz 関連記事まとめ - Qiita
