agent-transcript

Basic Info

• name: diagram-maker
• description: Create SVG/HTML or Excalidraw diagrams for concepts, architecture, flows, and whiteboards.
• metadata: {"openclaw":{"emoji":"🧭"}}

Overview

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

Format Selection Rules

1. Editable & collaborative canvas → Excalidraw
2. Polished standalone browser file → SVG / HTML
3. Software & infrastructure architecture → architecture-svg
4. Concepts, products, processes, physical objects → clean-svg
5. Unsure: Only ask short questions if format matters; default to clean-svg

Standard Workflow

1. Extract nodes, groups, labels and directed relationships
2. Confirm layout first: left-right / top-down / hub-spoke / swimlanes / layered stack / sequence
3. Keep labels short; limit main elements to 5–9 to avoid clutter
4. Output path: user specified path, fallback to ./diagram.html / ./diagram.excalidraw
5. Verify file syntax if possible

SVG / HTML Rules

• Single self-contained HTML file with inline CSS + inline SVG
• No external fonts, JS, images, gradients, glows or remote assets
• Use semantic color groups instead of random rainbow colors: neutral, input, process, storage, external, risk
• Draw connectors before shapes so arrows render behind boxes
• All directed lines use fill="none" with arrow markers
• 24px inner text padding inside all boxes, text cannot touch borders
• Add legend only when symbols/colors are ambiguous

SVG Template

Use references/svg-template.md as wrapper, replace the <!-- SVG --> placeholder.

Excalidraw Rules

• Export standard .excalidraw JSON with top-level keys: type, version, source, elements, appState
• All shape labels use bound text; custom label properties are forbidden
• Bound text entries sit immediately after their container inside elements array
• Minimum labeled shape size: 120×60; minimum text font size: 16px
• Unified style: roughness 1, fontFamily 1, solid simple fills
• Reusable element snippets: references/excalidraw-patterns.md