# Mermaid Diagram

> Generate Mermaid diagrams for educational content. Use when visualizing concepts, architectures, or workflows.

- Skill: `mjunaidca/mermaid-diagram` (Agent Skill)
- Install (CLI): `npx skillmds@latest add mjunaidca/mermaid-diagram`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mjunaidca/mermaid-diagram/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: mjunaidca (https://skillmd.com/u/mjunaidca)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/mjunaidca/mermaid-diagram

---


# Mermaid Diagram Skill

**Purpose**: Generate clear, educational Mermaid diagrams that visualize concepts for learners.

## When to Use

- Visualizing system architectures (ROS 2 node graphs)
- Showing data flow (sensor → processing → action)
- Illustrating state machines (robot behaviors)
- Explaining hierarchies (hardware tiers, module structure)

## Diagram Types

| Type | Use Case |
|------|----------|
| `flowchart` | Process flows, decision trees |
| `sequenceDiagram` | Message passing, ROS topics |
| `stateDiagram` | Robot states, FSMs |
| `classDiagram` | Code structure, URDF hierarchy |
| `graph` | System architecture |

## Output

- Mermaid code block ready for MDX
- Alt text for accessibility
- Caption explaining the diagram

## Integration

Used by lesson-generator when content requires visualization.

---

**Status**: Placeholder - To be implemented with diagram generation patterns.