Claude Code Plugins

Community-maintained marketplace

Feedback

drawio

@sordi-ai/skill-everything
13
2

Apply when creating or reviewing architecture diagrams, Mermaid diagrams, or draw.io files.

Install Skill

Shared

Installs to .agents/skills, used by Codex, Amp, Warp, Cursor, OpenCode, and more.

CodexAmp
WarpCursorOpenCode
ClineGemini CLI
GitHub Copilot
Personal

Available across projects.

$npx skills-installer add @sordi-ai/skill-everything/drawio --client shared
Project

Writes to .agents/skills.

$npx skills-installer add @sordi-ai/skill-everything/drawio -p --client shared
Note: Review the skill instructions before using it.

SKILL.md

name drawio
description Apply when creating or reviewing architecture diagrams, Mermaid diagrams, or draw.io files.
license MIT
version 1.0.0
tokens_target 1300
triggers architecture diagram, mermaid diagram, drawio file
loads_after
supersedes

Sub-Skill: Diagrams (draw.io / Mermaid)

Purpose: Ensure diagrams are version-controlled as source, rendered consistently, and kept in sync with the system they describe.

Rules

Source Control

  1. Commit source, not just exports. Always commit diagram source files (.drawio, .mmd, .puml) alongside or instead of rendered image exports. Reference: ERR-2026-027
  2. No binary-only diagrams. Never commit only a PNG or SVG export without the editable source; reviewers cannot diff or modify a raster image.
  3. One source file per diagram. Use a single canonical source file per diagram; avoid duplicating the same diagram in multiple formats.

Format Selection

  1. Prefer diagram-as-code. Prefer Mermaid or PlantUML over draw.io XML when the diagram fits a supported diagram type; text diffs are reviewable.
  2. Match diagram type to content. Use sequenceDiagram for request flows, flowchart for decision logic, C4Context/C4Container for architecture, erDiagram for data models.
  3. Set layout direction explicitly. Always declare layout direction (LR, TD) in Mermaid flowcharts; never rely on the default, which varies by renderer.

Rendering Pipeline

  1. Document the render command. Always include the render command or CI step in the repo README or Makefile so any contributor can regenerate exports.
  2. Regenerate exports in CI. Ensure CI regenerates diagram exports from source and fails if the committed export differs from the generated one.
  3. Pin renderer version. Always pin the Mermaid CLI or draw.io CLI version in CI to prevent silent rendering changes across upgrades.

Quality & Consistency

  1. Use consistent node naming. Always use the same label for the same system component across all diagrams in the repo; divergent names cause confusion.
  2. Add alt text to exported images. Always add descriptive alt text to diagram images embedded in documentation for accessibility.
  3. Review diagrams in PRs. Before merging, verify that any diagram change accurately reflects the system change described in the PR.

See also

  • skills/svg-check/SKILL.md
  • skills/error-log/SKILL.md