mcpField
D
diagram-maker

diagram-maker

github.com/openclawDesign & UI393.3k509 installsUpdated today
Repository

About diagram-maker

A skill for creating diagram files of concepts, processes, and software architectures, for users who need either an editable whiteboard or a standalone visual. It selects SVG or Excalidraw based on the use case and specifies layout, labeling, and file-format rules.

Key features

  1. 01Supports clean-svg, architecture-svg, and Excalidraw
  2. 02Chooses output format by purpose and editability
  3. 03Plans nodes, relationships, and layout
  4. 04Creates standalone HTML/SVG or Excalidraw files
  5. 05Defines syntax and labeling conventions

Use cases

  1. 01Diagram software and cloud infrastructure architecture
  2. 02Create process or lifecycle diagrams
  3. 03Make editable Excalidraw whiteboards
  4. 04Organize scientific or product concepts visually

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/openclaw/openclaw --skill diagram-maker

After installing, type/diagram-makerin Claude Code to confirm it loaded.

Bundled filesreferences/svg-template.mdreferences/excalidraw-patterns.md

Details

From the project README

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.

Comments

Markdown supported