98.8K+ダウンロード
使い方ガイドへスキップ
diagram作者 Garry Tan

Diagram スキル。

図表とチャート向けの Claude Code および Codex スキル：説明または Mermaid ソースから編集可能な Excalidraw ファイルとレンダリングされた SVG および PNG を生成します。

  • Diagrams & Data Visualization
  • Diagram
OpenDesign をダウンロード使い方ガイドを見る
garrytan/gstack · diagram/SKILL.mdSKILL.md
--- name: diagram description: Turn an English description (or mermaid source) into a diagram triplet: the source, an editable .excalidraw file you can open on excalidraw.com, and rendered SVG + PNG. (gstack) --- ## When to invoke this skill ## Step 1 — Author the diagram ## Step 2 — Stage the render bundle (once per session) ## Step 3 — Render the triplet ## Step 4 — Show and deliver ## Rules
2026年9月14日にアップストリームファイルから読み込まれた前付けとセクション見出し · 全16,276文字

01 できること

Claude CodeとCodexでdiagramスキルが行うこと

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

英語の説明文またはMermaidソースを、ダイアグラムの三つ組に変換します：Mermaidソース（.mmd）、excalidraw.comで開ける編集可能なExcalidrawファイル（.excalidraw）、そしてレンダリングされたSVGおよびPNG出力です。レンダリングはローカルループバックサーバーによって完全にオフラインで行われます — 実行中はAsideブラウザを使用し、そうでない場合はgstack自身のヘッドレスブラウザを使用します。

フローチャート（graph LR/TD）とシーケンス図は、実際のボックス、矢印、テキストを持つ完全に編集可能なExcalidrawシーンを生成します。他のMermaidダイアグラムタイプ（state、class、gantt）はSVG/PNGにレンダリングされ、Excalidrawファイル内の単一の画像要素としてエクスポートされます — 移動や注釈は可能ですが、要素単位での編集はできません。反復作業のための唯一の信頼できる情報源として、Mermaidソースが残ります。

生成されるもの

  • LLMフレンドリーな交換フォーマットであり、唯一の信頼できる情報源として機能するMermaidソースファイル（.mmd）。
プロンプト例を見る ↗

仕組み

  1. 01
    Mermaidソースを作成する

    ユーザーのリクエストに合わせてMermaidを記述します。パイプラインやフローにはgraph LRを、階層構造にはgraph TDを優先してください。

  2. 02
    セッションごとに一度、レンダーバンドルをステージングする

    diagram-render.htmlを、バンドルのSHAでコンテンツアドレス化された、${TMPDIR:-/tmp}/gstack-render配下にあるgstackのレンダーステージングディレクトリにステージングします。

  3. 03
    1つのコマンドで三つ組をレンダリングする

    .mmdファイルを記述し、その後ステージングされたバンドルでgstack-renderを実行してください。

  4. 04
    表示して提供する

    ユーザーが図を確認できるように、PNGをインラインで読み込んでください。トリプレットのパスを一覧表示し、.excalidrawファイルはexcalidraw.comで開いて編集できることを明記してください。

02 適合性を確認

diagram スキルを使用するタイミング

この種のダイアグラムやチャートの作業では、Claude Code または Codex の diagram skill を使用します。適合範囲と制限は、skill 自体のファイルから取得されています。

適している場合

  • ユーザーが図の作成、アーキテクチャの描画、フローチャートの作成、この図の作成、またはフローの可視化を依頼した場合。
  • ドキュメント用のクリアなベクター図を、チャットやissue、READMEに使うラスター出力とともに生成します。
  • ユーザーがexcalidraw.comで開いてボックスを移動し、作業を続けられる編集可能なExcalidrawファイルを生成します。

境界を知る

  • 1つのシーンにノードが15個を超える図は、可読性のために複数の図に分割してください。
  • state、class、gantt、その他のフローチャート/シーケンス以外のMermaidタイプは、移動は可能ですが要素単位で編集できないExcalidrawファイルを生成します。

提供すべきもの

  • 英語の説明またはMermaidソースユーザーが作成する図の説明を提供するか、既存のMermaidソースをレンダリング用に提供します。

03 スキルの内部

diagramスキルがClaude CodeとCodexに与えるルール

SKILL.md がエージェントに設定する 8 つの具体的な指示・既定値・制限 — 結果を変える部分です。

  1. レンダリングせずに出荷しない

    .mmdファイル単体は図ではありません。レンダリングが不可能な場合（バンドルが見つからない、またはブラウザが利用できない場合）は、その障害を明示して停止してください。

  2. フローチャートとシーケンス図は完全に編集可能です

    フローチャート（graph LR/TD）とシーケンス図は、実際のボックス、矢印、テキストを持つ完全に編集可能なExcalidrawシーンに変換されます。他のMermaidタイプは1つの画像要素としてエクスポートされます。

  3. ブラウザ転送用にソースをBase64エンコードする

    ソース内のバックティック、${ }、バックスラッシュの解釈を避けるため、MermaidソースはBase64でレンダリングページに渡してください。ファイルの内容をJSテンプレートリテラルに直接結合してはいけません。

  4. 出力ディレクトリはGitコンテキストに従います

    cwdがgitリポジトリの場合は./diagrams/に書き込んでください（ユーザーがコミットできる成果物になります）。それ以外の場合は/tmp/gstack-diagrams/に書き込んでください。スラッグは件名からkebab-caseで生成し、最大40文字とします。

  5. PNGの幅は1950pxに固定されています

    ラスタライズされたPNGは常に幅1950ピクセルで、6.5インチ配置の300dpiに相当します。

  6. レンダリングは完全にオフラインです

    diagram-renderバンドルは自己完結型で、ループバックから提供されます。CDNもネットワークも使用しません。

  7. Mermaidを変更せずに編集済みのExcalidrawを再レンダリングする

    ユーザーが.excalidrawファイルを編集して再レンダリングしたい場合は、シーンファイルを読み込んでSVG/PNGを直接エクスポートしてください。Mermaidソースから再生成してはいけません。

  8. PDF出力では.mmdの埋め込みを優先してください

    PDFに含める図については、make-pdfがMermaidのフェンスをネイティブにレンダリングすることをユーザーに伝えてください。PNGを埋め込むより、.mmdをmarkdownに埋め込む方が優れています。

04 実際に使う

Claude Code または Codex に diagram をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex、または自分のエージェントに diagram を追加

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal
npx skills add https://github.com/garrytan/gstack --skill diagram

diagram/SKILL.md用の汎用skills CLI形式。リポジトリが独自のパスを文書化している場合があります。

スキルに最初の図表とチャートのタスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt
Create a flowchart showing the build pipeline for [my TypeScript project]. Include lint, test, build, and deploy stages with their dependencies. Use graph LR layout and output to ./diagrams/.

出典：SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの：

  • PNG出力をインラインで確認し、ダイアグラムが正しくレンダリングされ、ユーザーの要求に一致していることを検証します。
  • gstack-renderの出力でMermaidの解析エラーを示すERROR:行を確認し、存在する場合は.mmdを修正して再試行します。
  • PAGE_ERRORS出力に「Error processing Mermaid diagram」があるかを確認し、Excalidrawコンバーターが単一の画像要素にフォールバックしたかを確認します。
  • gstack-renderの出力に3つのOK <path>行がすべて表示されていることを確認し、SVG、PNG、Excalidrawファイルが書き出されたことを確認します。
  • 編集済みExcalidrawの再レンダリングでは、PAGE_ERRORSに表示される無害なWorkerInTheMainChunkErrorは無視します — SVG/PNGは正しいです。

OpenDesignではSKILL.mdのリンクからdiagramをインポートします：Plugins → Add → Skill → Import from link、その後トップバーで選択します。

OpenDesign をダウンロードクイックスタートを読む

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Author
Garry Tan
Repository
github.com/garrytan/gstack ブランチ main
スキルファイル
diagram/SKILL.md 検証時に記録されたコンテンツチェックサム; コミット 71f6048
License
MIT LICENSE より。
リポジトリスター数
132,921 GitHub スナップショットは 2026 年 9 月 14 日に取得されたもので、garrytan/gstack リポジトリ全体（このカタログ内の 7 つのスキルを含む）が対象です。diagram の評価や使用数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません（2026-08-28 確認）。このページには実行記録がありません。

SKILL.md の中身

  1. このスキルを呼び出すタイミングダイアグラム、アーキテクチャ、フローチャート、または可視化のリクエストに使用します。SVG/PNGはMermaidスタイルを使用し、Excalidrawは手描き風の見た目になります。
  2. ステップ1 — ダイアグラムを作成Mermaidソースを記述します。フローチャートとシーケンス図は完全に編集可能なExcalidrawになりますが、その他のタイプは単一の画像として書き出されます。
  3. ステップ2 — レンダーバンドルをステージング（セッションごとに1回）diagram-render.htmlをgstackのレンダーステージングディレクトリにコピーします。SHAによるコンテンツアドレス方式で、並行するセッションを上書きしません。
  4. ステップ3 — トリプレットをレンダリング.mmdを記述し、base64エンコードされたソースを使ってgstack-renderを実行し、SVG/PNG/Excalidrawを出力します。解析エラーとPAGE_ERRORSを確認します。
  5. ステップ4 — 表示して提供PNGをインラインで読み込み、トリプレットのパスを一覧表示し、Excalidrawの編集可能性に言及します。変更が必要な場合は.mmdを編集して再レンダリングします。
  6. ルールレンダリングせずに提供しないでください。PDFを対象とする場合は、make-pdfがMermaidフェンスをネイティブにレンダリングすることをユーザーに伝えてください。
  7. 完了状態トリプレットが提供されたらDONE。バンドルが見つからない、またはブラウザが利用できない場合はBLOCKED。
スキル自身による説明
「英語の説明（または mermaid ソース）をダイアグラムトリプレットに変換します：ソース、excalidraw.com で開ける編集可能な .excalidraw ファイル、レンダリングされた SVG + PNG。（gstack）」

SKILL.md からの前付け説明です。完全なファイルは約 16,276 文字です。GitHub で完全なファイルを読む

06 インストールする前に

diagramスキルに関するよくある質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

レンダーバンドルが見つからない、またはブラウザが利用できない場合はどうなりますか？

スキルは停止し、gstackリポジトリでbun run build:diagram-renderを実行してバンドルをビルドするか、gstackのブラウザがビルドされていない場合はAside（macOS 15+）を開くよう指示します。このスキルはAsideを代わりにインストールしたり、CDNや別のレンダラーで代用したりすることは一切ありません。

Diagram

実際の図表とチャートのタスクで diagram を実行します。

OpenDesign をダウンロードし、SKILL.md リンクから diagram をインポートし、上記のプロンプトを貼り付けて、結果の前にプランを読み取ります。

OpenDesign をダウンロードすべてのスキルを見る
ターミナル
npx skills add https://github.com/garrytan/gstack --skill diagram

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート／スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応