diagram-design

diagram-designとは

diagram-design は、AIエージェントが説明用の図（構成図・工程図・データの流れ・時系列など45種類）を、外部に頼らず単体で開けるHTML（中にSVG）として描くためのスキルです。1つの図の要素は9個まで、強調色は2か所まで、線は直角に曲げる、影は付けない、といった細かな決まりと、図の決まりや線とラベルの重なりを確かめる検査スクリプトが付いています。初めて使うときは、配色とフォントを自社のものに合わせる手順があり、初期の配色のまま出さないようになっています。当社では2026年10月、ブロードリスニングから合意形成までの見取り図を描き直しました。日本語は、英字のフォントのあとに Noto Sans JP（見出しは Noto Serif JP）を続け、全角1文字を1文字分の幅として箱の大きさを計算すると、決まりどおりに描けました。隣り合う箱の間は狭いので、矢印のラベルは間が空いているところだけに置く必要がありました。

要点: Claude Code などのAIエージェントに、説明用の図をきれいに描かせるスキル（MIT）。45種類の図を、1つのHTML（中にSVG）として描きます。当社でブロードリスニングの見取り図を描き直しました。

主な用途

• ブログや提案資料の説明図を、決まった見た目でそろえる
• 工程図・構成図・データの流れの図をAIエージェントに描かせる
• Mermaid や draw.io の図を描き直す

diagram-designの基本情報

OSSを探しているなら、当社の完成品も

同じ「行政・公共データを住所から使える形にする」考え方で、当社が作って公開しているプロダクトです。すべて無料で試せます。

業務システムのオンプレミス版は Kurage App Store、 外注をAI自動化に置き換える相談は 業務のAI自動化 へ。