⚙️

描画・編集ツールまとめ（随時更新）

2022/09/01に公開

visualization

ツール

資料作る時の多くの時間を "フィーリングに合う描画ツール（ Visualization Tool ）や編集ツール探し" に消費しているので、良さげなツール見つけ次第ここにメモする。

注意：オンラインツールに関してはデータに機密情報が含まれない事を確認して利用
（悪意なくてもキャッシュや共有機能のためにデータ保存されている可能性があるので）

以下、一覧＆短い説明（詳しい説明はツール名からこのページ内のSectionにリンク）

JSON, YAML, etc. 描画編集ツール（テキスト⇒図）
- JSON Crack：JSON ⇒ ツリー図
- Qiita: Mermaid/PlantUML比較
- mermaid:
  - メリット：VSCode Plug-in、GitHub Markdown でサポート
  - デメリット：GitLab では未サポート
  - PlatUML 同様にシンプルな記法
  - https://github.com/mermaid-js/mermaid
- PlantUML：UML ⇒ 図（Class, Sequence, etc.）
  - https://plantuml.com/en/
  - メリット：VSCode Plug-in、GitLab でサポート
    - （但しGitLabではセットアップが必要）
  - デメリット：GitHub Markdown 未サポート
  - テーマ（theme）で見た目をカスタマイズすることも可能
  - https://plantuml.com/ja/theme
  - https://github.com/bschwarz/puml-themes
- Graphviz : https://graphviz.org/gallery/
  - 多種多様な図に対応
  - UML Class diagram ではメンバを記述するのに <table border="0" cellborder="0" cellspacing="0" > のようにHTML Likeに指定する必要があるのが難点
- blockdiag (seqdiag, actdiag, nwdiag)
  - http://blockdiag.com/ja/index.html
  - シンプルなテキストからブロック図などの画像を生成する画像生成ツール群
  - シーケンス図、アクティビティ図、ネットワーク図も生成可能
  - Takeshi KOMIYA @tk0miya(GitHub) の個人プロジェクト
汎用描画ツール（図）
- draw.io：https://draw.io | https://app.diagrams.net/
  - 図形を組み合わせた図～ UML, ERD までカバー
  - VSCode Plug-in もあるが、ローカルアプリの方が使いやすい
  - 有償版：https://drawio-app.com/
- Lucidchart：https://www.lucidchart.com/
  - draw.io と同じ？
Camunda Modeller：図 ⇒ テキスト（BPMN）
- https://camunda.com/download/modeler/
- BPMN描画ツール（Camunda Platform BPMNエンジンの一部）

まとめサイト

https://www.producthunt.com/topics

JSON Crack

Editor: https://jsoncrack.com/editor
Home: https://jsoncrack.com/
( 元 JSON Visio : https://jsonvisio.com/ ）

JSONをツリー状に描画してくれるツール。確認したいJSONノード（例：設定項目）をすぐ見つける事ができ、意図しないノードがあれば気付くことができて便利。不要なノードは折りたためるのもNice！
ポート数が多い SONiC 設定ファイル（config_db.json）などの確認に便利。

ローカルでも動かすことが可能。仕事ではこちら使った方が安心安全？

A Docker file is provided in the root of the repository.
If you want to run JSON Crack locally:
* Build Docker image with `docker build -t jsoncrack .`
* Run locally with `docker run -p 8888:8080 jsoncrack`
* Go to [http://localhost:8888]

画像は SONiCの設定ファイルを元に生成。

JSON Crack

Discussion