New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Pneuma Diagram

by pandazki in pandazki/pneuma-skills

Create and edit draw.io diagrams in the Pneuma Diagram workspace.

MITAuto-check passedDevelopment

Install Pneuma Diagram

skills CLI
$ npx skills add pandazki/pneuma-skills --skill pneuma-diagram -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install pandazki/pneuma-skills pneuma-diagram --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/pandazki/pneuma-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/modes/diagram/skill .claude/skills/pneuma-diagram && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
pneuma-diagram
GitHub stars
161
Token cost
~2.2k tokens
SKILL.md length
842 words
Files
3 (incl. references)
Skills in repo
30
Repo updated
First seen
Licence
MIT

At a glance

Create and edit draw.io diagrams in the Pneuma Diagram workspace.

  • Works in 10 steps: Cells 0 and 1 are mandatory — id="0"… → All elements have parent="1" (or a… → IDs must be unique — use descriptive… → …
  • ANY task in this workspace
  • SKILL.md covers Working with the viewer, File Rules, .drawio XML Structure and Critical Rules, plus 6 more sections
  • Calls curl

What it does

Pneuma Diagram is an agent skill from pandazki/pneuma-skills. Create and edit draw.io diagrams in the Pneuma Diagram workspace. Use for ANY task in this workspace. Defines the .drawio XML format, style strings, edge rules, and color palette.

Its SKILL.md is about 2.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/style-reference.md` and `references/xml-reference.md`).

It sits in Development, covering Diagrams and Theming and dark mode. It works with draw.io. The repository describes itself as: Co-creation infrastructure for humans and code agents — visual environment, skills, continuous learning, and distribution. The licence is MIT.

When your agent uses it

  • ANY task in this workspace
  • Tasks that involve Diagrams
  • Tasks that involve Theming and dark mode

Example prompts

  • “/pneuma-diagram”

Workflow steps

10 steps, taken from the first numbered list in SKILL.md.

  1. Cells 0 and 1 are mandatory — id="0" (root) and id="1" (default layer, parent="0") must always be the first two cells.
  2. All elements have parent="1" (or a container/group id).
  3. IDs must be unique — use descriptive strings: "server-1", "edge-api-db".
  4. Vertices need vertex="1"; edges need edge="1" — mutually exclusive.
  5. Every edge must have — non-negotiable.
  6. No XML comments — no <!-- --> in output.
  7. Always include adaptiveColors="auto" on mxGraphModel for dark mode.
  8. Escape special characters: &amp;, &lt;, &gt;, &quot;.
  9. Uncompressed XML only — never compressed="true".
  10. Preserve existing IDs when editing — changing IDs breaks connections and viewer state.

What it can do on your machine

Read from SKILL.md and the folder at commit 0023d3c. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • curl

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use curl, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Pneuma Diagram loads about 2.2k tokens when it runs, and up to ~8.1k if it reads all its reference files. Until then it costs about 49 tokens; SKILL.md has 842 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~49
When it runs · the whole SKILL.md, loaded when a task matches
~2.2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~8.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from pandazki/pneuma-skills at commit 0023d3c, republished under its MIT licence (© pandazki). 842 words, ~2,237 tokens.

Download SKILL.mdSave it as .claude/skills/pneuma-diagram/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
pneuma-diagram
description
Create and edit draw.io diagrams in the Pneuma Diagram workspace. Use for ANY task in this workspace. Defines the .drawio XML format, style strings, edge rules, and color palette.

Pneuma Diagram Mode

You create and edit draw.io diagrams. The user sees a live preview that updates as you write .drawio files. Changes appear in real time during streaming — no confirmation needed.

Working with the viewer

The diagram canvas is the live surface where you and the user meet. Files (.drawio XML) are the source of truth; the viewer renders them and exposes a few channels for the user to point at things and for you to drive the canvas. Use these channels — don't ask the user to describe what they're looking at.

Reading what the user sees

Before you respond, scan the latest user turn for two viewer-emitted blocks:

  • <viewer-context> — current canvas state. Carries the active .drawio file (workspace-relative path) and, when the user clicked a shape or edge to chat about it, the selected element (cell id, value, and style summary). Trust this over your own assumptions about what's open.
  • <user-actions> — discrete events since the last turn (file switches, page changes, element selections). These are the breadcrumbs of what the user just did on the canvas.

If the user says "this box" or "that arrow" without further context, it almost always refers to the selected element from <viewer-context> — Read that file and locate the cell by id before editing.

ViewerAddress — naming an object in the diagram

A ViewerAddress is the one JSON object that names "which object in the viewer" — shared by locator cards, the capture action, navigation, and selection reports. Diagram's address vocabulary:

KeyGranularityMeaning
filecoarseWorkspace-relative path to the .drawio file.
nodeIdfinedraw.io cell id of a single node / connector. Omit → the whole diagram.

Selection reports it on the Address: line inside <viewer-context> — copy it verbatim back into a locator card.

Locator cards

After creating or substantially updating a diagram, embed a locator card so the user can jump to it from the chat. The viewer renders the card as a clickable chip that opens the diagram in the preview pane. The address attribute is a ViewerAddress JSON object.

Real example:

html
<viewer-locator label="Open architecture.drawio" address='{"file":"architecture.drawio"}' />

For a multi-page diagram, one card opens the whole file; the user uses the viewer's page tabs to switch between <diagram> pages.

Viewer actions

The viewer exposes one agent-callable action via POST $PNEUMA_API/api/viewer/action:

  • scaffold — Reset the active diagram to empty state. clearPatterns: ["(active file)"]. No params.

Use it when the user asks for a clean slate on the current diagram (e.g. "start over", "clear this diagram"). The action wipes the .drawio file's content; you then write a fresh <mxfile> skeleton.

bash
curl -X POST "$PNEUMA_API/api/viewer/action" \
  -H "Content-Type: application/json" \
  -d '{"action":"scaffold","params":{}}'

After scaffold, write the new diagram with Write — don't expect the canvas to do anything until you save the file.

File Rules

  • Multi-page support. A single .drawio file can contain multiple <diagram> pages — the viewer shows tabs to switch between them. Use multiple pages for related diagrams on the same topic (e.g., overview + detail views). Each <diagram> must have a unique id and descriptive name.
  • Descriptive, stable cell IDs (e.g. user-box, edge-api-db) — the user can click elements on the canvas, and selections come back via <viewer-context> keyed by id. Random ids like cell-1 make those references hard to reason about.
  • When modifying an existing diagram, always Read the file first to preserve existing cell IDs and structure.
Show full SKILL.md (326 more words)Show less

.drawio XML Structure

xml
<mxfile>
  <diagram id="page-1" name="Page-1">
    <mxGraphModel dx="0" dy="0" grid="1" gridSize="10"
                  math="0" shadow="0" adaptiveColors="auto">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="svc-1" value="Auth Service" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="100" y="100" width="140" height="60" as="geometry"/></mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Critical Rules

  1. Cells 0 and 1 are mandatory — id="0" (root) and id="1" (default layer, parent="0") must always be the first two cells.
  2. All elements have parent="1" (or a container/group id).
  3. IDs must be unique — use descriptive strings: "server-1", "edge-api-db".
  4. Vertices need vertex="1"; edges need edge="1" — mutually exclusive.
  5. Every edge must have <mxGeometry relative="1" as="geometry" /> — non-negotiable.
  6. No XML comments — no <!-- --> in output.
  7. Always include adaptiveColors="auto" on mxGraphModel for dark mode.
  8. Escape special characters: &amp;, &lt;, &gt;, &quot;.
  9. Uncompressed XML only — never compressed="true".
  10. Preserve existing IDs when editing — changing IDs breaks connections and viewer state.

Style Strings

Semicolon-separated key=value pairs, ending with ;. No spaces around = or ;.

rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;
  • Bare tokens set shape type: ellipse;, rhombus;, swimlane;
  • Boolean values: 0 or 1
  • Colors: #RRGGBB, none, or default
  • Always include whiteSpace=wrap;html=1; on vertices so labels wrap correctly

Common Patterns

Rounded rectangle:

xml
<mxCell id="svc-1" value="Auth Service" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="140" height="60" as="geometry"/>
</mxCell>

Diamond (decision):

xml
<mxCell id="dec-1" value="OK?" style="rhombus;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="300" y="90" width="120" height="80" as="geometry"/>
</mxCell>

Database:

xml
<mxCell id="db-1" value="PostgreSQL" style="shape=cylinder3;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="100" y="240" width="100" height="70" as="geometry"/>
</mxCell>

Arrow (always expanded form):

xml
<mxCell id="e-1" style="edgeStyle=orthogonalEdgeStyle;rounded=1;" edge="1" source="svc-1" target="db-1" parent="1">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

Labeled arrow:

xml
<mxCell id="e-2" value="Yes" style="edgeStyle=orthogonalEdgeStyle;" edge="1" source="dec-1" target="svc-1" parent="1">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

Swimlane container (children use parent=container-id):

xml
<mxCell id="lane-1" value="User Service" style="swimlane;startSize=30;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="300" height="200" as="geometry"/>
</mxCell>
<mxCell id="api-1" value="REST API" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="lane-1">
  <mxGeometry x="20" y="50" width="120" height="60" as="geometry"/>
</mxCell>

Color Palette

Coordinated fill/stroke pairs for consistent diagrams:

ThemefillColorstrokeColorUse for
Blue#dae8fc#6c8ebfServices, APIs, primary
Green#d5e8d4#82b366Success, databases, storage
Yellow#fff2cc#d6b656Warnings, queues, buffers
Orange#ffe6cc#d79b00External systems, triggers
Red#f8cecc#b85450Errors, critical paths
Purple#e1d5e7#9673a6Users, actors, auth
Gray#f5f5f5#666666Infrastructure, neutral

Layout

  • Position elements on multiples of 10 (grid alignment)
  • Leave at least 60px between nodes; prefer 200px horizontal, 120px vertical
  • Use edgeStyle=orthogonalEdgeStyle for right-angle connectors (most common)
  • Control connection points with exitX/exitY/entryX/entryY (values 0-1)
  • Add waypoints to avoid overlapping edges:
    xml
    <mxCell id="e1" style="edgeStyle=orthogonalEdgeStyle;" edge="1" parent="1" source="a" target="b">
  <mxGeometry relative="1" as="geometry">
    <Array as="points"><mxPoint x="300" y="150"/><mxPoint x="300" y="250"/></Array>
  </mxGeometry>
</mxCell>

Language Matching

Match all diagram labels to the user's language. If they write in Chinese, all text in the diagram should be Chinese.

References

For advanced topics, read these files when needed:

  • {SKILL_PATH}/references/xml-reference.md — XML structure, layers, metadata, dark mode, edge routing
  • {SKILL_PATH}/references/style-reference.md — style properties, shapes, colors, HTML labels, shape library (AWS/Azure/GCP/K8s/UML/BPMN/ER)

© pandazki, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (references) in modes/diagram/skill of pandazki/pneuma-skills.

  • SKILL.md
  • references/style-reference.md
  • references/xml-reference.md

Open the folder on GitHubat commit 0023d3c

Compare with similar skills

Pneuma Diagram next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Pneuma Diagram compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Pneuma Diagram this skillpandazki/pneuma-skills161—~2.2kAutomated safety check: PassMIT
Diagram Generatorluongnv89/skills131—~2.2kAutomated safety check: PassMIT
Diagram Designcathrynlavery/diagram-design49k1 repos~7.6kAutomated safety check: PassMIT
Draw.io Diagram StudioAgents365-ai/drawio-skill10k—~2.4kAutomated safety check: NotesMIT
Draw.io Diagram ReconstructionHKUSTDial/Supervisor-Skills8.8k—~5.4kAutomated safety check: PassMIT
Scibox Diagramjihe520/sci-box2491 repos~983Automated safety check: NotesNone

Similar skills

  • Diagram Generator

    luongnv89/skills

    Generate a diagram and route to the right engine — draw.io XML (precise, editable, C4, swimlanes) or Excalidraw JSON (hand-drawn, sketch, wireframes).

    131 GitHub stars~2.2k tokensUpdated 2 days ago
    DevelopmentAuto-check passed

  • Diagram Design

    cathrynlavery/diagram-design

    Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.

    49k GitHub starsUsed in 1 repo~7.6k tokens
    DevelopmentAuto-check passed

  • Draw.io Diagram Studio

    Agents365-ai/drawio-skill

    Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.

    10k GitHub stars~2.4k tokensUpdated today
    DevelopmentAuto-check: notes

  • Draw.io Diagram Reconstruction

    HKUSTDial/Supervisor-Skills

    Rebuilds a reference diagram image as an editable, high-fidelity Draw.io file, mixing native elements, SVG icons and cropped PNGs, with a batch workflow for a folder of images.

    8.8k GitHub stars~5.4k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed

  • Scibox Diagram

    jihe520/sci-box

    制作与修改可编辑的 draw.io / diagrams.net 示意图（.drawio XML），产出 .drawio + PNG/PDF。三条路径：套用内置模板（五带技术路线图、三栏研究框架图、三栏阶段流程图、横版任务流水线图）、从零手写…

    249 GitHub starsUsed in 1 repo~983 tokens
    DevelopmentAuto-check: notes

  • Drawio Diagram Builder

    Will-hxw/drawio-diagram-builder

    Create, edit, replicate, and iteratively refine editable research and technical diagrams in diagrams.net/draw.io (.drawio XML) from prompts, papers, repositories, screenshots, or existing diagrams.

    413 GitHub stars~5.9k tokensUpdated 3 mo ago
    DevelopmentAuto-check passed

More from pandazki/pneuma-skills

All 30 skills in this repo

  • Pneuma Bansho

    pandazki/pneuma-skills

    Explain something by writing it on a board. An agent skill from pandazki/pneuma-skills.

    161 GitHub stars~6.9k tokensUpdated 2 days ago
    Auto-check passed

  • Pneuma Clipcraft

    pandazki/pneuma-skills

    AI-orchestrated video production on @pneuma-craft. An agent skill from pandazki/pneuma-skills.

    161 GitHub stars~7.5k tokensUpdated 2 days ago
    Auto-check: notes

  • Pneuma Lucid

    pandazki/pneuma-skills

    Pneuma Lucid Mode workspace guidelines. An agent skill from pandazki/pneuma-skills.

    161 GitHub stars~4.6k tokensUpdated 2 days ago
    Auto-check: warnings

  • Pneuma Plotwise

    pandazki/pneuma-skills

    Pneuma Plotwise workspace guidelines. An agent skill from pandazki/pneuma-skills.

    161 GitHub stars~8.9k tokensUpdated 2 days ago
    Auto-check passed

  • Pneuma Sprite

    pandazki/pneuma-skills

    Pneuma Sprite Mode workspace guidelines. An agent skill from pandazki/pneuma-skills.

    161 GitHub stars~16k tokensUpdated 2 days ago
    Auto-check passed

  • Pneuma Webcraft

    pandazki/pneuma-skills

    Pneuma WebCraft Mode workspace guidelines with Impeccable.style design intelligence.

    161 GitHub stars~7.5k tokensUpdated 2 days ago
    Auto-check: notes

Works with

Categories

Questions about Pneuma Diagram

What does Pneuma Diagram do?

Create and edit draw.io diagrams in the Pneuma Diagram workspace. Pneuma Diagram is an agent skill from pandazki/pneuma-skills.io diagrams in the Pneuma Diagram workspace.

When should I use Pneuma Diagram?

Pneuma Diagram fits situations like: ANY task in this workspace; tasks that involve Diagrams; tasks that involve Theming and dark mode.

How do I install Pneuma Diagram in Claude Code?

Run `npx skills add pandazki/pneuma-skills --skill pneuma-diagram -a claude-code`. Or copy the skill folder (modes/diagram/skill in pandazki/pneuma-skills) into .claude/skills/pneuma-diagram in your project. Claude Code loads it when a task matches its description.

How do I install Pneuma Diagram in Codex?

Run `npx skills add pandazki/pneuma-skills --skill pneuma-diagram -a codex`. Or copy the skill folder (modes/diagram/skill in pandazki/pneuma-skills) into .agents/skills/pneuma-diagram in your project. Codex loads it when a task matches its description.

Can I use Pneuma Diagram in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add pandazki/pneuma-skills --skill pneuma-diagram -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/pneuma-diagram, .gemini/skills/pneuma-diagram, .github/skills/pneuma-diagram and .opencode/skills/pneuma-diagram in your project.

What does Pneuma Diagram need to run?

Going by SKILL.md and its folder, Pneuma Diagram needs the command-line tools its instructions call (curl).

Does Pneuma Diagram access the network?

SKILL.md contains no URLs. Its commands use curl, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Pneuma Diagram safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Pneuma Diagram use?

Pneuma Diagram is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Pneuma Diagram use?

About 2.2k tokens (SKILL.md is roughly 8.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.8k tokens, read only when the agent opens those files.

What are the alternatives to Pneuma Diagram?

Skills that share tags, products or a category with Pneuma Diagram: Diagram Generator (luongnv89/skills, 131 stars), Diagram Design (cathrynlavery/diagram-design, 49k stars), Draw.io Diagram Studio (Agents365-ai/drawio-skill, 10k stars) and Draw.io Diagram Reconstruction (HKUSTDial/Supervisor-Skills, 8.8k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Pneuma Diagram?

pandazki (a GitHub user) maintains it in pandazki/pneuma-skills, which has 161 GitHub stars. The repository holds 30 skills in this directory. The repository was last updated on October 9, 2026.

Source: pandazki/pneuma-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.