diagram-maker — скилл для Claude Code: схемы и установка
Скилл создаёт схемы в SVG/HTML или Excalidraw по описанию концепции, архитектуры и процессов. Пригодится, когда вместо объяснения текстом нужен наглядный файл.
npx skills add openclaw/openclaw --skill diagram-maker -a claude-codeЧто делает diagram-maker
Скилл превращает описание в диаграмму: сначала выделяет элементы, подписи и связи, затем выбирает компоновку — например, слои, последовательность или дорожки. Для редактируемой доски он выбирает Excalidraw, для отдельного файла в браузере — SVG/HTML. Если формат важен, он задаёт один короткий вопрос.
SVG/HTML сохраняется как один HTML-файл со встроенными CSS и SVG. Внешние шрифты, скрипты и изображения не используются; для схемы архитектуры предусмотрен отдельный режим. Файл создаётся по указанному пути или, если путь не задан, как ./diagram.html либо ./diagram.excalidraw. Синтаксис проверяется, когда это возможно. Для точных шаблонов Excalidraw скилл обращается к references/excalidraw-patterns.md, а для SVG — к references/svg-template.md.
В Excalidraw сохраняется JSON с заданными полями, а подписи связываются с фигурами. Это повод проверить ограничения формата: например, текст в фигуре должен иметь размер не меньше 16px, а минимальная подписанная фигура — 120x60.
Какие задачи решает
- собрать схему архитектуры сервисов и баз данных
- показать этапы процесса на диаграмме
- нарисовать последовательность взаимодействий
- подготовить редактируемую доску в Excalidraw
Примеры запросов агенту
- Нарисуй архитектуру сервисов и баз данных проекта в `./diagram.html`.
- Покажи процесс обработки заказа как редактируемую схему Excalidraw.
- Сделай диаграмму жизненного цикла объекта в SVG.
Как установить diagram-maker
1Через Skills CLI (Vercel)
npx skills add openclaw/openclaw --skill diagram-maker -a claude-code2Вручную: положить файлы
~/.claude/skills/diagram-maker/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/diagram-maker/
1Через Skills CLI (Vercel)
npx skills add openclaw/openclaw --skill diagram-maker -a codex2Вручную: положить файлы
.agents/skills/diagram-maker/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add openclaw/openclaw --skill diagram-maker -a cursor2Вручную: положить файлы
.cursor/skills/diagram-maker/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install openclaw/openclaw diagram-maker2Вручную: положить файлы
.github/skills/diagram-maker/SKILL.md1Через Skills CLI (Vercel)
npx skills add openclaw/openclaw --skill diagram-maker -a gemini-cli2Командой платформы
gemini skills install https://github.com/openclaw/openclaw --path skills/diagram-makerВручную: положить файлы
.devin/skills/diagram-maker/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add openclaw/openclaw --skill diagram-maker -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора48
Весь набор →Похожие
Вопросы о diagram-maker
Как установить diagram-maker в Claude Code?
Выполните npx skills add openclaw/openclaw --skill diagram-maker -a claude-code. Файл скилла находится по пути ~/.claude/skills/diagram-maker/SKILL.md.
Что делает diagram-maker?
Он создаёт SVG/HTML-диаграммы или редактируемые схемы Excalidraw по описанию концепций, процессов и архитектуры.
Когда diagram-maker выбирает Excalidraw, а когда SVG/HTML?
Для редактируемой или совместной доски он выбирает Excalidraw. Для самостоятельного файла, который открывается в браузере, использует SVG/HTML.
Исходный текст
SKILL.md · MIT
---
name: diagram-maker
description: Create SVG/HTML or Excalidraw diagrams for concepts, architecture, flows, and whiteboards.
metadata: { "openclaw": { "emoji": "🧭" } }
---
# 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
1. Extract nodes, groups, labels, and directed relationships.
2. Pick layout first: left-to-right, top-down, hub-spoke, swimlanes, layered stack, sequence.
3. Keep labels short. Prefer 5-9 main elements over dense diagrams.
4. Generate the file at the requested path, or `./diagram.html` / `./diagram.excalidraw`.
5. 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 `<!-- SVG -->`.
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`.
© openclaw · MIT · openclaw/openclaw
