無料GitHub で公開日本語紹介

diagram-maker

概念や業務の流れ、ソフトウェア構成を図にまとめます。ブラウザで開けるSVG入りHTMLか、編集できるExcalidraw形式で保存するスキルです。

原文Create SVG/HTML or Excalidraw diagrams for concepts, architecture, flows, and whiteboards.

openclaw/openclaw

インストール方法を見る

こんなときに便利

教材で概念を図解したいとき
業務の流れをフローチャートにしたいとき
ソフトウェアやクラウドの構成図作成
編集できるホワイトボード図の作成

日本語での紹介

できること

概念、処理の流れ、ソフトウェアやクラウドの構成を、図のファイルにまとめるスキルです。要素とグループ、短いラベル、矢印で示す関係を整理し、左右方向、上下方向、レーン分けなどの配置を選びます。出力は、SVGを埋め込んだ単独のHTMLファイルか、編集できるExcalidraw形式です。説明したい内容に合わせて、概念図、構成図、手描き風の図を使い分けます。

こんなときに便利

学習用の概念説明、業務プロセスの共有、サービスやデータベースの関係整理に向いています。ブラウザで見られる図が欲しい場合はSVG/HTML、後から編集したり共同作業に使ったりする場合はExcalidrawを選べます。主要な要素を絞り、密集しすぎない図にまとめます。

使い方の例

「この業務の流れを、ブラウザで開ける図にして」
「サービスとデータベースの関係を構成図にして」
「編集できるExcalidraw形式でフローチャートを作って」

注意点

SVG/HTML出力は外部フォント、JavaScript、画像、リモート素材を使わない単独ファイルです。指定がなければ./diagram.htmlまたは./diagram.excalidrawに保存し、可能な範囲で構文を確認します。

この紹介文は、公開されている SKILL.md をもとに AI（Claude Haiku）が作成しました。正確な仕様は下の原文を確認してください。

含まれるファイル（3）

SKILL.md2.3 KB
references/excalidraw-patterns.md1.4 KB
references/svg-template.md1.9 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Diagram Maker

Create diagrams as artifacts, not prose. Choose one output mode:

clean-svg: educational concepts, physical systems, processes, lifecycle, simple data flow.
architecture-svg: software/cloud/infra topology, services, databases, queues, trust zones.
excalidraw: editable hand-drawn whiteboard, flowchart, sequence, architecture sketch.

Routing

User wants editable/collaborative: choose Excalidraw.
User wants polished standalone browser output: choose SVG/HTML.
Software architecture with infra components: choose architecture SVG.
Science, product, process, concept map, physical object: choose clean SVG.
Unsure: ask one short question only if output format matters; otherwise choose clean SVG.

Workflow

Extract nodes, groups, labels, and directed relationships.
Pick layout first: left-to-right, top-down, hub-spoke, swimlanes, layered stack, sequence.
Keep labels short. Prefer 5-9 main elements over dense diagrams.
Generate the file at the requested path, or ./diagram.html / ./diagram.excalidraw.
Verify syntax by opening/parsing when feasible.

SVG/HTML rules

Single standalone .html file with inline CSS and inline SVG.
No external fonts, JS, images, gradients, glows, decorative blobs, or remote assets.
Use semantic colors, not rainbow sequences: neutral, input, process, storage, external, risk.
Draw connectors before nodes so arrows sit behind boxes.
Every connector path has fill="none" and a marker arrow when directed.
Leave 24px text padding inside boxes; do not let text touch borders.
Legend only when symbols/colors are not obvious.

SVG template

Use references/svg-template.md as the wrapper and replace .

Excalidraw rules

Save .excalidraw JSON with type, version, source, elements, and appState.
Use bound text for shape labels. Do not use a nonstandard label property.
Keep bound text immediately after its container in the elements array.
Minimum labeled shape: 120x60. Minimum body text: 16px.
Use roughness 1, fontFamily: 1, and simple fills.

For exact Excalidraw element snippets, read references/excalidraw-patterns.md.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ