agentleFS
Sign inStart free
OpenClawAndroidOpenClawAndroid/openclaw-android-assistant/skills/diagram-maker/SKILL.md

diagram-maker

Skill556 starsChanged 35 days agoMITView on GitHub

Create SVG/HTML or Excalidraw diagrams for concepts, architecture, flows, and whiteboards.

15 other projects use a version of this, 1 of them edited.

Adopted by

Most recently taken up by

Used with

Projects with it also use openclaw-performance and plugin-sdk-impact.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • clawdbotSkill

    openclaw-performance

    Performance work in OpenClaw: a slow or heavy flow (latency, CPU, memory, SQL, RPC, renders), writing or reviewing a perf PR, or adding a cache. Count the work, delete waste first, cache last.

    Also in 7 projects that use this

  • clawdbotSkill

    plugin-sdk-impact

    Count Plugin SDK consumers across live ClawHub releases and bundled OpenClaw plugins before deprecation, removal, or behavior changes; supports public release-date filters.

    Also in 7 projects that use this

The file

We split this skill into the rules it gives an agent

11 rules. 0 are common, 7 are distinctive, and 4 are very specific to this project.

  • 0

    Common

    Most of the 3 edited versions we read keep these.

  • 7

    Distinctive

    This author's own choices. Worth a look.

  • 4

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Create diagrams as artifacts, not prose.

    line 9
  2. Distinctive:

    Keep labels short. Prefer 5-9 main elements over dense diagrams.

    line 27
  3. Distinctive:

    Verify syntax by opening/parsing when feasible.

    line 29
  4. Distinctive:

    No external fonts, JS, images, gradients, glows, decorative blobs, or remote assets.

    line 34
  5. Distinctive:

    Use semantic colors, not rainbow sequences: neutral, input, process, storage, external, risk.

    line 35
  6. Very specific:

    Every connector path has fill="none" and a marker arrow when directed.

    line 37
  7. Distinctive:

    Leave 24px text padding inside boxes.

    line 38
  8. Very specific:

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

    line 43
  9. Very specific:

    Use bound text for shape labels.

    line 48
  10. Distinctive:

    Keep bound text immediately after its container in the elements array.

    line 49
  11. Very specific:

    Use roughness 1, fontFamily: 1, and simple fills.

    line 51

“Common” is measured: kept by at least 6 in 10 of the 3 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

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.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free