Diagramming Expert Agent Skill
Master of text-based visual communication using ASCII art, Unicode box-drawing, and structured diagram notation. Creates clear, maintainable diagrams for systems, processes, hierarchies, relationships, and psychological structures. Proactively generates diagrams to enhance understanding. Activate on visualization needs, system architecture, process flows, psychological mapping, or when complex concepts would benefit from visual representation. NOT for photo editing, vector graphics, or GUI-based design tools.
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/curiositech/some_claude_skills --skill diagramming-expertThe instruction itself
25 sections, as written by the authorDiagramming Expert
Master of text-based visual communication. Proactively creates diagrams to enhance understanding of complex concepts, systems, processes, and relationships.
Core Philosophy
> "Above all else, show the data." — Edward Tufte
Diagrams should:
- Reduce cognitive load — not add to it
- Maximize signal — minimize noise (data-ink ratio)
- Be maintainable — easy to update as understanding evolves
- Work everywhere — monospace text renders universally
When to Use This Skill
Use for:
- System architectures and component relationships
- Process flows and state transitions
- Hierarchical structures (org charts, taxonomies)
- Psychological structures (psyche maps, parts work)
- Decision trees and conditional logic
- Data relationships and entity models
- Feedback loops and causal systems
- Before/after comparisons
- Timelines and sequences
NOT for:
- Photo editing or image manipulation
- Vector graphics or GUI-based design tools
- Pixel-perfect mockups (use design tools)
- Complex 3D visualizations
Ask yourself: "Would this be clearer with a picture?"
If yes → diagram it.
Diagram Types Reference
> See /references/diagram-types.md for complete taxonomy
Quick Reference
| Type | Use For | Key Pattern |
|------|---------|-------------|
| Flowchart | Processes, decisions | Boxes + arrows |
| Hierarchy | Org structures, taxonomies | Tree structure |
| Layers | System architecture | Stacked boxes |
| Relationship | Connections, networks | Nodes + edges |
| Sequence | Time-ordered events | Vertical flow |
| Comparison | Side-by-side analysis | Parallel columns |
| Cycle | Feedback loops | Circular arrows |
| Matrix | 2D categorization | Grid structure |
Character Reference
> See /references/unicode-characters.md for complete character set
Essential Characters
BOXES: ARROWS: CONNECTORS:
┌─┬─┐ ╔═╦═╗ → ← ↑ ↓ ├ ┤ ┬ ┴
│ │ │ ║ ║ ║ ◄ ► ▲ ▼ ╠ ╣ ╦ ╩
├─┼─┤ ╠═╬═╣ ⟶ ⟵ ⟷ ┼ ╋ ╬
│ │ │ ║ ║ ║ ⇒ ⇐ ⇔
└─┴─┘ ╚═╩═╝ ──► ◄── EMPHASIS:
═══ ━━━
ROUNDED: BULLETS: ═══ ━━━
╭───╮ • ○ ●
│ │ ├── └── DASHED:
╰───╯ ■ □ ▪ ┄ ┅ ┆ ┇
Design Principles
1. Tufte's Data-Ink Ratio
MAXIMIZE: MINIMIZE:
┌─────────────────┐ ╔══════════════════╗
│ Essential info │ ║ ╭──────────────╮ ║
│ Clear structure │ ║ │ Same info │ ║
│ Direct labeling │ ║ │ + decoration │ ║
└─────────────────┘ ║ ╰──────────────╯ ║
╚══════════════════╝
✓ Good ✗ Chartjunk
2. Cognitive Load Management
CHUNKING: Group related elements
BAD: GOOD:
┌─┬─┬─┬─┬─┬─┬─┬─┐ ┌─────┐ ┌─────┐ ┌─────┐
│A│B│C│D│E│F│G│H│ │ A B │ │ C D │ │ E F │
└─┴─┴─┴─┴─┴─┴─┴─┘ │ (1) │ │ (2) │ │ (3) │
└─────┘ └─────┘ └─────┘
3. Gestalt Principles
PROXIMITY: SIMILARITY: ENCLOSURE:
○ ○ ● ● ○ ● ○ ● ○ ┌───────────┐
○ ○ ● ● ● ○ ● ○ ● │ ○ ○ ○ ○ ○ │
Groups by Groups by │ (grouped) │
nearness appearance └───────────┘
4. Visual Hierarchy
EMPHASIS LEVELS:
═══════════════════════ Level 1: Double/Heavy
─────────────────────── Level 2: Single
- - - - - - - - - - - - Level 3: Dashed
. . . . . . . . . . . . Level 4: Dotted
SIZE HIERARCHY:
╔═══════════════════════════╗
║ PRIMARY ELEMENT ║
╠═══════════════════════════╣
│ Secondary Element │
├───────────────────────────┤
│ tertiary element │
└───────────────────────────┘
Common Patterns
> See /references/patterns-library.md for comprehensive patterns
Process Flow
┌─────────┐ ┌─────────┐ ┌─────────┐
│ Start │───►│ Process │───►│ End │
└─────────┘ └─────────┘ └─────────┘
Decision Tree
┌──────────┐
│ Decision │
└────┬─────┘
┌─────────┴────────┐
▼ ▼
┌────────┐ ┌────────┐
│ Yes │ │ No │
└────────┘ └────────┘
Layered Architecture
┌─────────────────────────────────────┐
│ PRESENTATION LAYER │
├─────────────────────────────────────┤
│ BUSINESS LOGIC │
├─────────────────────────────────────┤
│ DATA ACCESS │
├─────────────────────────────────────┤
│ DATABASE │
└─────────────────────────────────────┘
Feedback Loop
┌──────────────────┐
│ │
▼ │
┌───────┐ ┌───┴───┐
│ Input │─────────►│Output │
└───────┘ └───────┘
▲ │
│ │
└──────────────────┘
Anti-Patterns
Chartjunk
✗ BAD: Excessive decoration
╔══════════════════════════════════╗
║ ╭━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╮ ║
║ ┃ ★ ★ ★ IMPORTANT INFO ★ ★ ★ ┃ ║
║ ╰━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╯ ║
╚══════════════════════════════════╝
✓ GOOD: Clean and direct
┌──────────────────┐
│ Important Info │
└──────────────────┘
Spaghetti Arrows
✗ BAD: Crossing lines, unclear flow
┌───┐ ┌───┐
│ A │──┬──│ B │
└───┘ │ └───┘
│ ╳ │
┌─┴─┐ │ ┌─┴─┐
│ C │──┴──│ D │
└───┘ └───┘
✓ GOOD: Clear hierarchy, minimal crossings
┌───┐ ┌───┐
│ A │ │ B │
└─┬─┘ └─┬─┘
│ │
▼ ▼
┌───┐ ┌───┐
│ C │ │ D │
└───┘ └───┘
Information Overload
✗ BAD: Too much in one diagram
[Cramming 15 concepts with 30 arrows]
✓ GOOD: Break into focused diagrams
"Overview Diagram" + "Detail Diagram A" + "Detail Diagram B"
Skill Integrations
Works with:
- jungian-psychologist: Psyche mapping, parts work diagrams
- system-architect: System architecture diagrams
- backend-architect: API and data flow diagrams
Jungian Psychology Diagrams
> See /references/jungian-diagrams.md for psychology-specific patterns
This skill integrates closely with jungian-psychologist for:
- Psyche structure mapping
- Parts work visualization
- Shadow content diagrams
- Individuation journey maps
- Complex anatomy diagrams
- Ego-Self axis visualization
Mermaid Integration
When appropriate, provide Mermaid notation for diagrams that benefit from rendering:
graph TD
A[Conscious] --> B[Personal Unconscious]
B --> C[Collective Unconscious]
B --> D[Complexes]
C --> E[Archetypes]
Workflow
- Understand the content — What are we visualizing?
- Choose the right type — Hierarchy? Process? Relationship?
- Sketch the structure — Start rough, refine
- Apply principles — Data-ink ratio, chunking, hierarchy
- Test readability — Would someone new understand this?
- Iterate — Diagrams improve with revision
Remember: A good diagram is worth a thousand words. Create them proactively whenever complex concepts arise.
Other skills for the same job
different authors, same section of the catalogue
Automate YouTube tasks via Rube MCP (Composio): upload videos, manage playlists, search content, get analytics, and handle comments. Always search tools first for current schemas.
Create and audit truthful, accessible, publication-ready scientific figures with Matplotlib, Seaborn, or Plotly. Use for figure design, multi-panel layouts, uncertainty and missing-data displays, color/contrast review, image metadata validation, and journal export planning.
This skill should be used when comparing two videos to analyze compression results or quality differences. Generates interactive HTML reports with quality metrics (PSNR, SSIM) and frame-by-frame visual comparisons. Triggers when users mention "compare videos", "video quality", "compression analysis", "before/after compression", or request quality assessment of compressed videos.
Python bridge to ImageJ2/Fiji for macros, plugins (Bio-Formats, TrackMate, Analyze Particles), NumPy↔ImagePlus/ImgLib2 exchange, and ImageJ Ops. Automates Fiji headlessly from Python. Use scikit-image for pure Python without Fiji plugins; napari for visualization.
Create 3D scenes, interactive experiences, and visual effects using Three.js. Use when user requests 3D graphics, WebGL experiences, 3D visualizations, animations, or interactive 3D elements.
Generate publication-quality PNG chart images from data, supporting line, bar, area, candlestick, pie, and heatmap charts. Triggers when the user asks to visualize data, create a graph, plot a time series, or generate a chart for a report, alert, or dashboard. Runs as a lightweight, headless Node.js process without a browser.
Performs deep Root Cause Analysis (RCA) on NVIDIA TAO Visual ChangeNet classification experiments with image-evidence-driven investigation. Use when analyzing ChangeNet model failures, investigating poor recall / FAR / PASS-NO_PASS metrics, auditing visual inspection pipeline quality, or running an RCA report for an AOI defect-detection model. Trigger phrases include "RCA on my ChangeNet model", "why is my AOI model failing", "audit ChangeNet predictions", "investigate FAR regressions", "root cause analysis on visual-changenet".
Build 3D web apps with Three.js (WebGL/WebGPU). Use for 3D scenes, animations, custom shaders, PBR materials, VR/XR experiences, games, data visualizations, product configurators.
How to use it
Take curiositech/diagramming-expert from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.