🎨 デザインCC / Codex 両対応難易度: 初心者

図解作成 diagram

複雑な説明も一目で分かる図に

出典リポの★

131,392

最終更新

28日前

作者

garrytan

これは何？

これは、文章で書かれた説明やMermaidコードを3種類の形式の図解に変換してくれる便利なツールです。綺麗なMermaidスタイルのSVG/PNG画像と、編集可能な手書き風の図が同時に作成できるので、資料作りや設計書の作成に重宝します。完全オフラインで動作するため、機密情報を扱う場合も安心です。

これでできること

システムのアーキテクチャ図を簡単に作成できる
フローチャートやシーケンス図を自動生成できる
Mermaidコードを視覚的な図に変換できる
編集可能なExcalidrawファイルを生成できる
オフライン環境でも図を作成できる

こんな時に便利

設計書や仕様書に使う図を素早く作りたい時

コードの構造を視覚的に説明したい時

複雑なプロセスをフローチャートで整理したい時

Mermaidコードのプレビューを見たい時

手書き風の図を作りたい時

使い方

『図にしたい』『フローチャートを作って』といったリクエストを英語で送るだけで、自動的に3種類の形式の図解が生成されます。Mermaid形式のコードを渡してもOKです。生成された図は、Excalidraw.comで編集可能なファイルとしても、すぐに使える画像形式としても利用できます。

使用例（こう頼んでみよう）

make a diagram of our backend architecturedraw the data flow between these componentscreate a flowchart for this login processvisualize this API sequence as a mermaid diagram

必要なもの

特になし

導入方法

いちばん簡単（AIに頼む）

次のスキルを入れて: https://github.com/garrytan/gstack/tree/main/diagram

手動で置く

Claude Code → ~/.claude/skills/diagram/

Codex → ~/.agents/skills/diagram/

使いこなしのコツ

手書き風が好みならExcalidrawファイルを、綺麗な図が好みならSVG/PNGを使い分けましょう
最初に大まかな構成を文章で説明すると、より意図通りの図が生成されます
機密情報を含む場合はオフライン機能を活用しましょう

GitHubで見る