Grapvhiz, blockdiagのフロントエンドのメモ

# Grapvhiz, blockdiagのフロントエンド(テキストエディタ付きビューワ)

・テキスト入力領域に入っているテキストを最初のノード名？(digraph {...}, seqdiag {...} )で判断して呼び出すexe(dot, blockdiag, seqdiag)を切り替える。
・結果をSVGで出力し、テキスト入力領域右側の表示画面で表示する。
(・できたらテキスト入力時にインテリセンス的な入力補助がある)
といったものがほしい。

[LiveDiag - GitHub][18]が、これに最も近い(＋markdownの中に埋め込みもしている様子)が、Mac向けしかなさそう + Grapvizをサポートしてない？

Windowsの場合、フォトビューワ＋サクラエディタ＋PlantUMLで、テキストエディタ付きビューワ的に使えました(そこそこライブプレビュー的にできる)
エンコーディングはSJIS(CP932)でないと日本語が化けるようです。
※Sublime Textだとシンタックスハイライトしてくれますが、なぜかConvertToUTF8を使っても文字化け。不明。

あまりこだわりすぎないなら、これでいいかなと。
（ツールで可能な表現だけに集中して、図の「芸術」的な調整をあえてしない）

![1.PNG](https://qiita-image-store.s3.amazonaws.com/0/34777/f1e095fc-3b06-6438-ee63-ab799f6a37a9.png)

# 2017.10.30 追記

vscodeがいい感じですね。plantUMLもプレビューできるし。

![vscode.PNG](https://qiita-image-store.s3.amazonaws.com/0/34777/bbf4540f-9468-69bc-8031-ab0f50a71f3f.png)

# PlantUML
[PlantUML _ プログラマーズ雑記帳](http://yohshiy.blog.fc2.com/blog-category-22.html)
[AtomとPlantUMLで爆速UMLモデリング - Qiita](http://qiita.com/nakahashi/items/3d88655f055ca6a2617c)
[PlantUMLで気軽にUML作成 - Qiita](http://qiita.com/hkitahara/items/11b470381c0714d0eb26)
[QiitaにUMLを載せられるようにPlantUMLつかってWebサービス作ろうと思ったら本家にあった話 - Qiita](http://qiita.com/ryskiwt/items/c6c0760b341b5a5fe560)
[PlantUML Cheat Sheet - Qiita](http://qiita.com/ogomr/items/0b5c4de7f38fd1482a48)
[PlantUML導入手順 - Qiita](http://qiita.com/borerere/items/01eeb2332b74b93b0958)


## blockdiag, seqdiag
[LiveDiag - GitHub][18]

## Graphviz
[Doteditor][17]
[GVedit（Windows 用 Graphviz フロントエンド）のバグをなおしてみた - miauの避難所][1]
[electronなGraphvizエディタ 'electron-viz' - Qiita][5]
[viz.js - GitHub][16]

# 参考
[作図系ツール・ライブラリまとめ - GitHub][14]

[Graphviz _ Graphviz - Graph Visualization Software][0]
[Graphviz for Windowsにかませるちょっとしたマクロ的な何か - ooharakの日記][2]
[Graphviz-win の日本語化 - Tips][3]
[Graphvizによるファンクション・コールの視覚化][4]

[シーケンス図生成ツール seqdiag — blockdiag 1.0 ドキュメント][12]
[複数ノードのパケットキャプチャファイルからシーケンス図を出力するツールを作成した - Qiita][11]

[RichTextBox用のインテリセンスを作ってみた][7]
[[C#][WPF]インテリセンスみたいなの作れるかな.htm][8]]
[インテリセンス付きテキストボックス  DOBON.NETプログラミング掲示板過去ログ][9]
[CodeTextBox - another RichTextBox control with syntax highlightning and intellisense - CodeProject][10]

[emscriptenでC_C++プログラムをwebブラウザから使うまでの難所攻略][19]

[ドキュメント書くのを限界までラクにする - Qiita][13]
[データのビジュアル化を最少の労力で  Graphviz][6]

[0]:http://www.graphviz.org/
[1]:http://d.hatena.ne.jp/miau/20110303/1299145173
[2]:http://d.hatena.ne.jp/ooharak/20090119/1232381000
[3]:http://senta.s112.xrea.com/senta/Tips/000/81/index.html
[4]:https://www.ibm.com/developerworks/jp/linux/library/l-graphvis/index.html
[5]:http://qiita.com/Kazunori-Kimura/items/8e2b65ed6117a3681cdc
[6]:http://www.showa-corp.jp/special/graphtools/graphviz.html
[7]:http://vbegg.webcrow.jp/WinForms/Neta/IntellisenseTest/intellisensetest1richtextbox.html
[8]:http://blogs.wankuma.com/kazuki/archive/2008/02/05/121456.aspx
[9]:https://dobon.net/vb/bbs/log3-49/29231.html
[10]:http://www.codeproject.com/KB/cs/diy-intellisense.aspx
[11]:http://qiita.com/yusukew62/items/d3e2c73717598e271333
[12]:http://blockdiag.com/ja/seqdiag/
[13]:http://qiita.com/umiyosh/items/d73f1e507aa8018b5cf2
[14]:https://gist.github.com/hashrock/208b84c61558663e40bb
[15]:https://www.slideshare.net/llamerada-jp/cmu29
[16]:https://github.com/mdaines/viz.js
[17]:http://vincenthee.github.io/DotEditor/
[18]:https://github.com/dataich/LiveDiag
[19]:https://www.slideshare.net/llamerada-jp/cmu29