Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

diagram-maker — Claude Code skill: diagrams and setup

This skill turns descriptions of concepts, architecture, and processes into SVG/HTML or Excalidraw diagrams. Use it when a visual file is clearer than prose.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add openclaw/openclaw --skill diagram-maker -a claude-code
Open on GitHub

What diagram-maker does

The skill extracts nodes, labels, groups, and relationships, then chooses a layout such as a sequence, layered stack, or swimlanes. It uses Excalidraw for an editable whiteboard and SVG/HTML for a standalone browser file. If the output format matters, it asks one short question.

SVG/HTML output is a single HTML file with inline CSS and SVG. It uses no external fonts, scripts, or images. The file goes to the requested path, or to ./diagram.html or ./diagram.excalidraw when no path is given. Syntax is checked when feasible. For exact Excalidraw snippets, the skill reads references/excalidraw-patterns.md; its SVG wrapper comes from references/svg-template.md.

Excalidraw output is JSON with the required fields, and labels are bound to shapes. Check the format constraints before relying on a layout: labeled shapes must be at least 120x60, and body text must be at least 16px.

What it helps with

  • map services and databases in a software architecture
  • show the stages of a process in a diagram
  • draw a sequence of interactions
  • create an editable Excalidraw whiteboard

Example prompts for the agent

  • Draw the project’s service and database architecture in `./diagram.html`.
  • Turn this workflow into an editable Excalidraw diagram.
  • Create an SVG showing this object’s lifecycle.

How to install diagram-maker

1Skills CLI (Vercel)

npx skills add openclaw/openclaw --skill diagram-maker -a claude-code

2Manually: put the files in place

~/.claude/skills/diagram-maker/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/diagram-maker/

From the same set48

The whole set →
summarize openclaw Runs a CLI tool to summarize or transcribe web articles, YouTube videos, podcasts, and local PDF documents directly within your AI assistant. Claude Code CX Codex Cursor +1 26,900installs weather openclaw This skill fetches current conditions and forecasts for a city, region, airport code, or coordinates. Use it to check rain and temperature or plan a trip. Claude Code CX Codex Cursor +1 9,300installs gog openclaw Guides an agent using the gog CLI for Gmail, Calendar, Drive, Contacts, Sheets, and Docs. Use it when Google Workspace tasks need to run from a terminal. Claude Code CX Codex Cursor +1 8,500installs tmux openclaw Lets an agent work with live tmux sessions: read pane output, send keys and text, wait for a prompt line to show up. Claude Code CX Codex Cursor +1 8,400installs openai-whisper openclaw This skill lets your agent call the Whisper CLI to transcribe audio on your own machine. No API key needed. Claude Code CX Codex Cursor +1 7,100installs nano-pdf openclaw Edit PDF pages with plain text instructions through the nano-pdf CLI. Useful when you need to fix a typo or swap a heading without leaving your terminal. Claude Code CX Codex Cursor +1 7,100installs skill-creator openclaw A skill for writing, repairing and reviewing other skills. It splits behaviour into branches, sets the frontmatter and sorts resources into folders. Useful once your skill folder gets crowded. Claude Code CX Codex Cursor +1 6,700installs coding-agent openclaw This skill sends large coding tasks to Codex, Claude Code, or OpenCode as background workers. Use it for refactors, PR reviews, and issue-to-PR work. Claude Code CX Codex Cursor +1 6,500installs

Similar

pexo-agent pexoai This skill creates finished multi-shot videos from text, images, URLs, scripts, or audio. Use it for product ads, short videos, and explainers. Claude Code CX Codex Cursor +1 40,400installs emilkowalski-motion nexu-io Adds micro-interactions, state transitions and motion to an existing interface. Use it after the layout or component is already built. Claude Code CX Codex Cursor +1 2,300installs canva-creator official anthropics Executes marketing campaigns from an approved content brief: builds the schedule, generates Canva graphics for social posts, writes copy, and stages sends in HubSpot. Claude Code CX Codex Cursor +1 1,900installs antislop-human miqdadbadjuber An accessibility skill for AI agents that checks UI contrast, keyboard focus, and control states. Ships with a WCAG AA contrast checker script. Claude Code CX Codex Cursor +1 5,800installs antislop-layoutmobile miqdadbadjuber A skill for responsive layouts across phone and desktop widths. It checks breakpoints, reflow, grids, overflow, sizing, tap targets, and navigation. Claude Code CX Codex Cursor +1 5,700installs research-decision-room nexu-io Turns messy interview notes, support tickets, and surveys into a single interactive HTML decision room without fabricating certainty. Claude Code CX Codex Cursor +1 2,100installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs

Questions about diagram-maker

How do I install diagram-maker in Claude Code?

Run npx skills add openclaw/openclaw --skill diagram-maker -a claude-code. The skill file is at ~/.claude/skills/diagram-maker/SKILL.md.

What does diagram-maker do?

It creates SVG/HTML diagrams or editable Excalidraw boards from descriptions of concepts, processes, and software architecture.

When does diagram-maker use Excalidraw instead of SVG/HTML?

It chooses Excalidraw for an editable or collaborative whiteboard. For a standalone file to view in a browser, it uses SVG/HTML.

Source text

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

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor