概要
29種類の自己完結型 HTML+SVG エディトリアルグレードのチャートタイプを収録し、Agent Skill 形式で Claude Code、Codex、Pi などから利用可能。スタイルガイドによるブランドカラーとフォントのマッチングに対応し、ライト、ダーク、フルエディトリアルスタイルの3種類のバリアントを出力します。
README プレビュー
# Diagram Design\n\n**Editorial diagrams your designer won't hate.**\n\n\n\n\n\n*New in 2.0 — the Loop: flywheels with a shared-memory hub. The dashed lines are the write-backs.*\n\n27 types. One agent skill for Claude Code, Codex, and Pi. Your brand in 60 seconds — the skill reads your website and maps colors + fonts to every diagram. Already have diagrams in draw.io? Point it at the file and it redraws them at the format, size, and level of detail your audience needs.\n\nNo Figma. No generic rounded boxes. No 30-minute color-picking sessions.\n\n---\n\n## Why I built it\n\nI write at [littlemight.com](https://littlemight.com?utm_source=diagram-design&utm_medium=readme&utm_campaign=github&utm_content=intro) (and run [BestSelf.co](https://bestself.co?utm_source=diagram-design&utm_medium=readme&utm_campaign=github&utm_content=intro) on the side). Every time I needed a diagram — an architecture sketch, a flowchart, a pyramid of what matters most — I'd ask Claude and get back a generic rounded-box thing that looked nothing like the rest of the site. I'd either fight with Figma for 30 minutes or just skip the diagram.\n\nSo I built a Claude Code skill for it. Twenty-seven types, editorial quality, matches your brand in 60 seconds by reading your website.\n\n> *The highest-quality move is usually deletion.* Every node earns its place. The accent color is reserved for the 1–2 things the reader should look at first. Target density: 4/10.\n\n---\n\n## What it makes\n\nAll 27 diagrams ship in three variants: minimal light, minimal dark, and full-editorial. Open any of them directly in a browser — no build step, no JS, no external images.\n\n\n\n ArchitectureComponents + connections\n FlowchartDecision logic\n SequenceMessages over time\n\n\n State machineStates + transitions\n ER / data modelEntities + fields\n TimelineEvents on an axis\n\n\n SwimlaneCross-functional flow\n QuadrantTwo-axis positioning\n NestedHierarchy by containment\n\n\n TreeParent → children\n
FAQ (5)
トラブル対応アーキテクチャ図でカスタムのペーパーやスキンを使用するとゾーンラベルがほとんど見えなくなる問題を修正するにはどうすればよいですか？
バージョン 2.4.0 では、type-architecture.md 内のゾーンアイブロウが fill="rgba(45,49,66,0.40)" をハードコードしており、これはデフォルトのペーパー #f5f5f5 に対してのみ調整されています。#faf8f6 のような、より明るい、または暖色系のペーパーでは、コントラストが約 2.22:1 まで低下する可能性があります。
ハードコードされた色とフォントを、セマンティックなスキンロールに置き換えてください:
-<text … fill="rgba(45,49,66,0.40)" font-size="7"
- font-family="'Geist Mono', monospace" …>LAYER</text>
+<text … fill="{soft}" font-size="7"
+ font-family="{sublabel font}" …>LAYER</text>soft はサブラベルや境界ラベル向けに意図されたロールであるため、アクティブなスキンとダークモードに自動的に追従します。これにより、個別のダークモード用 rgba オーバーライドを削除できます。
恒久的な修正としては、issue #65 に対するタイプリファレンスのスキントークン修正を含むリリースにアップグレードしてください。バージョンが固定された 2.4.0 のインストールにパッチを適用する必要がある場合は、バージョン付きのキャッシュパス配下にあるファイルを編集します。例:
plugins/cache/diagram-design/diagram-design/2.4.0/skills/diagram-design/references/type-architecture.md他の SVG スニペットでも、リテラルの 16 進数値やフォントファミリーの代わりに、{ink}、{paper}、{accent @ 0.50}、{callout font}、{sublabel font} などのプレースホルダーを使用する必要があります。
トラブル対応verify-geometry.py が平行移動した SVG パネルに対して label-mask クリッピングを誤検出するのはなぜですか？
ジオメトリチェッカーは、ラベルマスクとノード矩形をキャンバス座標に変換せず、ローカルなSVG座標のまま比較していました。scripts/verify-geometry.py を issue #293 の修正に合わせて更新してください。この修正では、交差チェックの前に、既にサポートされている translate() の座標換算をラベルマスクと後から描画されるノードに適用します。更新後、再実行してください：
python3 scripts/verify-geometry.py <file>.svg平行移動されたパネルでは誤った重なり検出が発生しなくなり、キャンバス座標で実際に重なっているマスクは検出されるようになります。この修正は一般的なSVG transformのサポートを追加するものではなく、既にサポートされているグループ/要素の平行移動のみが処理対象です。
トラブル対応なぜ verify-motion.py は aria-hidden の装飾的なアイコンに対して SVG の title/description 欠落エラーを報告するのに、lint-skin.py はパスするのですか？
これは verify-motion.py のバグでした。このスクリプトは、aria-hidden="true" でマークされた装飾的なアイコンを含め、すべてのルート SVG 要素に対して図の命名チェックを適用していました。PR #295 を含むリリースに更新してから、装飾的な SVG ルートを次のようにマークしてください:
<svg aria-hidden="true" focusable="false">
<!-- 装飾的なアイコン -->
</svg>再実行してください:
python3 scripts/verify-motion.py <file>.html修正されたスクリプトは、装飾的な SVG ルートを命名チェックとカウントチェックの対象から除外しつつ、意味のあるモーション図に対しては引き続きアクセシブルな命名を要求します。すぐに更新できない場合は、検証の間だけ装飾的なアイコンを削除するか、PR のパッチを適用してください。本当に装飾的なアイコンから aria-hidden を削除してはいけません。
トラブル対応explodedまたはaxonometricのverifierが、指数表記で記述された有効なSVGパス座標を拒否してしまう問題を修正するにはどうすればよいですか？
これは、共有の verify-exploded.parse_path トークナイザのバグが原因です。このバグでは、1e-3 や -2.5E2 などの有効な SVG 数値が個別のオペランドに分割され、読み取り不能なシルエットとして報告されます。ベリファイアを、fix(verifiers): read scientific notation in projected SVG path coordinates を含むリリースに更新してください。この修正では、絶対 M/L/A/Z コマンドにおける符号、先頭の小数点、指数をサポートしつつ、アークフラグはリテラルの 0 または 1 のまま維持します。一時的な回避策として、検証前に指数表記の座標を同等の10進表記に正規化してください。例えば 1e-3 → 0.001、-2.5E2 → -250 のようにします。ジオメトリは有効であり、Chromium 151 を搭載した Playwright 1.62.0 では、同等のパスが正しくレンダリングされます。
トラブル対応heatmap verifier が 10億を超える有効なカウントに対して "no parseable cells" と報告する問題を修正するにはどうすればよいですか？
ベリファイアは、heatmap フォーマットにカウントの上限がないにもかかわらず、value >= 1e9 の有限の非負の値を誤って拒否します。PR fix(heatmap): accept finite billion-scale counts の修正を含むリリースにアップグレードしてください。パーサーは、NaN、Infinity、および負の値を引き続き拒否しながら、任意の有限の非負の数値を受け入れるようになりました。一時的な回避策として、最大値が 1,000,000,000 未満になるように、すべてのセルのカウントを同じ正の係数で割り、凡例/単位のラベルを付け直してください。スケーリングが一様であるため、これにより相対的な順序と不透明度が維持されます。