公開中 · オープンソース
diagram-polish
READMEのMermaidブロックやシステムの説明を、すっきりしたアーキテクチャ図に変えるClaude Codeのスキルです。システムを5〜7個の箱に絞り、同じ見た目で描きます。
- 種類
- Claude Codeスキル + Node.jsスクリプト
- 期間
- 2026年10月
- 運用環境
- 自分のPC · Node.js 18以上
概要
diagram-polishは、アーキテクチャ図を描き直すClaude Codeのスキルです。READMEのMermaidブロックや大まかなスケッチ・説明、あるいはリポジトリだけを渡すと、きれいなSVGとPNGを返します。
動きは4段階です。Claudeが元の情報を読んでコードと照らし合わせ、システムを5〜7個の箱に絞って、箱と矢印を小さなdiagram.jsonに書きます。スクリプトが配置と線の経路を計算して絵を描きます。そのあとClaudeが結果を見て、矢印の向きが逆といった、検査では見つからない部分を直します。
このサイトの構成図もこの方法で作りました。テーマはsage、blue、monoの3つで、それぞれライトとダークがあります。オープンソースで、プラグインとして入れるか、スキルのフォルダを~/.claude/skillsにコピーして使えます。
主な機能
- Mermaidをすっきりした構成図に
- Mermaidブロック、README、コードを読み、ひとつの見た目で描き直します。角丸の箱、まとまって動くものを囲む点線の枠、自分で運用しないサービスの別の色、予約実行を表す点線が基本です。
- 箱は5〜7個
- 1つのコードベースの部品は合わせ、重複した矢印は1本にし、ラベルは1〜2語に縮めます。先にコードを確認するので、存在しないものは描きません。
- 自分の絵を検査
- スクリプトは間違いがあれば止まり、はみ出した箱・重なり・箱を貫く線・ぶつかるラベルを警告します。Claudeは絵を実際に開いて確かめてから渡します。
- ハングルと日本語の文字
- 箱の幅をハングル・かな・漢字の幅で計算し、PNGではそれらの文字にシステムのゴシック体を選びます。
構成図
技術構成
- スキル
- Claude Codeスキル（SKILL.md）· プラグインマニフェスト（claude plugin install）
- スクリプト
- Node.js · 依存なしのSVGレンダラー · 文字幅の推定 · 直角の線の経路
- 絵
- SVG · Geist · ライト／ダークのパレット · auto SVG（prefers-color-scheme）
- PNG
- @resvg/resvg-js · ハングル・かな用のシステムゴシック体
- 検査
- はみ出し・重なり・箱を貫く線・ラベルの衝突の検査 · 1コマンドで例を全部描き直して検査
スキルにはClaude Codeが必要で、スクリプトだけならNode.jsがあれば動きます。見比べ画像の「before」はMermaidの標準テーマです。