Skip to content
cccskills
FreePublished on GitHubEnglish overview

diagram-maker

Turns concepts, processes, and software architecture into diagram files. Choose a standalone HTML file containing SVG for browser viewing, or an editable Excalidraw whiteboard for flowcharts, sequences, and architecture sketches.

OriginalShow the original description

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

openclaw/openclaw
AI rating100/ 100See how to install

Good for

  • Illustrating concepts for learning materials
  • Mapping a process as a flowchart
  • Drawing software and cloud architecture
  • Creating an editable whiteboard sketch

Overview

What it does

diagram-maker turns concepts, process flows, and software or cloud architecture into diagram files. It organizes elements, groups, short labels, and relationships shown with arrows, then selects a layout such as left to right, top to bottom, or separate lanes. Depending on the subject, it creates concept diagrams, architecture diagrams, or drawings with a hand-drawn appearance. Output is either a standalone HTML file containing SVG or an editable Excalidraw file.

When it helps

Use it to explain concepts in learning materials, share business processes, or clarify relationships between services and databases. Choose SVG/HTML when you want a diagram you can open in a browser. Choose Excalidraw for later editing or collaboration. The skill focuses on the main elements and keeps the diagram from becoming overcrowded.

Example requests

  • “Turn this business process into a diagram I can open in a browser.”
  • “Draw an architecture diagram showing the services and databases.”
  • “Create a flowchart in editable Excalidraw format.”

Notes

SVG/HTML output is a standalone file without external fonts, JavaScript, images, or remote assets. Unless you specify a path, files are saved as ./diagram.html or ./diagram.excalidraw. Syntax is checked where feasible.

This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.

Objective evaluation

AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.

Clear instructionsIs it clear when to use it and what it does?
AGoodThe source specifies uses for concept, architecture, and editable diagrams and explains how to select an output format.
Concrete stepsAre steps, inputs, outputs, and examples spelled out?
AGoodSteps cover extracting elements, choosing layouts, saving files, and checking syntax, with rules for both output formats.
SafetyAre sending data, deleting files, and running commands disclosed?
AGoodFile destinations are specified, and SVG/HTML rules prohibit external assets and JavaScript.
Easy setupDoes it need few tools or API keys, and are they documented?
AGoodNo additional tools or API keys are specified, and paths to the referenced templates are provided.

The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 19, 2026. Treat it as a guide and read the original before installing.

Disagree? Request a re-evaluation

Tell us which point is wrong and why. No login needed. We will check it against the SKILL.md, redo the evaluation, and show the result here.

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

Files included (3)

  • SKILL.md2.3 KB
  • references/excalidraw-patterns.md1.4 KB
  • references/svg-template.md1.9 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

1password

FreeSummary

Set up and authenticate the 1Password CLI, then supply stored passwords and API keys to commands or configuration. The skill covers desktop integration, service accounts, and interactive sign-in while keeping secrets out of chat and logs.

  • Setting up the 1Password CLI
  • Supplying API keys to commands
  • Using service account authentication in CI
openclaw/openclaw392.4KUpdated Oct 18, 2026

acp-router

FreeSummaryAI rating 80

Route requests from OpenClaw to external coding agents such as Claude Code or Cursor. Start or continue sessions using ACP, a protocol for connecting agents, or relay prompts directly through acpx while preserving conversation context.

  • Starting a Claude Code session in a thread
  • Continuing work with an external coding agent
  • Relaying prompts directly through acpx
openclaw/openclaw392.4KUpdated Oct 18, 2026

add-model-provider

FreeSummary

Add a model provider to OpenClaw and verify it with a real response. The skill validates configuration, keeps credentials in environment or file references, and reports test results and any default model changes.

  • Adding a model provider to OpenClaw
  • Configuring credentials through environment or file references
  • Checking whether a model returns a real response
openclaw/openclaw392.4KUpdated Oct 18, 2026

agent-transcript

FreeSummary

Prepare an agent activity transcript for a GitHub pull request or issue. Extract relevant prompts, decisions, and results from local logs, remove sensitive material, and preview the edited record before separately authorized publication.

  • Preparing an agent activity record for a pull request
  • Extracting task-relevant prompts and results from local logs
  • Previewing a transcript with sensitive information removed
openclaw/openclaw392.4KUpdated Oct 18, 2026

apple-notes

FreeSummary

Manage Apple Notes on macOS through memo, a command-line tool. Create, browse, search, edit, delete, and move notes between folders, or export selected notes to HTML or Markdown for use outside the app.

  • Creating notes with titles
  • Finding notes by folder or approximate search
  • Editing notes and organizing them into folders
openclaw/openclaw392.4KUpdated Oct 18, 2026

apple-reminders

FreeSummaryAI rating 70

Manage Apple Reminders from your Mac with remindctl, a terminal tool. View tasks by date, add or edit reminders, organize lists, and mark tasks complete or delete them, including personal to-dos that sync to iOS.

  • Review today’s tasks and overdue reminders
  • Add personal to-dos with due dates
  • Organize tasks visible on an iPhone or iPad
openclaw/openclaw392.4KUpdated Oct 18, 2026

See all skills by openclaw

Report a problem with this skill