Architecture and flows described in words: ten sentences are worth less than one diagram. OpenClaw's official Diagram Maker Skill is built on the claim that diagrams are artifacts, not prose — pick the right output mode and actually draw the concept, system, or flow.
Three output modes, chosen per need
clean-svg: educational concepts, physical systems, processes, lifecycles, simple data flows — clean diagrams with semantic colors, no decoration
architecture-svg: software/cloud/infra topology — services, databases, queues, and trust zones shown in layers
excalidraw: editable hand-drawn whiteboards — flowcharts, sequence diagrams, architecture sketches for collaborative iteration
Design discipline: not prettier, but correct
The skill encodes a set of engineering constraints: extract nodes, groups, labels and directed relationships first, then choose a layout (left-to-right, top-down, hub-spoke, swimlanes, layered stack, sequence); keep labels short and prefer 5-9 main elements over dense diagrams.
SVG/HTML follow hard rules: a single standalone file with inline CSS+SVG, no external fonts/JS/images/gradients/glows; semantic colors instead of rainbows (neutral/input/process/storage/external/risk); connectors drawn before nodes so arrows sit behind boxes; directed connectors need fill="none" plus an arrow marker; 24px text padding inside boxes; a legend only when symbols are unclear. These rules ensure the output is both correct and reusable.
Typical use cases
Explaining a design: walk non-technical listeners through system architecture with one layered architecture SVG
Flow mapping: business processes, decision trees, lifecycles in clean SVG — clearer than a text list
Collaborative whiteboard: sketch and edit live in Excalidraw during review meetings, exportable and shareable
How to use & download
OpenClaw users: diagram-maker is a built-in skill — describe the diagram you need in natural language and artifacts land in the working directory. See OpenClaw docs.
Other agent users: follows the standard SKILL.md convention; the full diagram decision tree and SVG spec are reusable. Source: OpenClaw GitHub repo.
Related resources
Content-creation skills work together: this skill draws, PPT generation (pptx) puts diagrams into decks, and Word documents (docx) fold them into reports.