What problem does it solve? Hand-drawn whiteboard diagrams get erased, and PNG diagrams committed to repos produce unreadable diffs and go stale. This Skill guides learners through writing diagrams as Mermaid text that renders natively in GitHub READMEs, PRs, and VS Code, so architecture documentation lives in version control alongside the code. ## Core Features & Use Cases - Four diagram types in Mermaid: Drills flowchart (graph LR), sequence (sequenceDiagram), state (stateDiagram-v2), and ER (erDiagram) syntax with shape, arrow, and crow's-foot notation references. - Diagrams-as-code workflow: Walks through installing the Markdown Preview Mermaid extension in VS Code, embedding Mermaid in a README, pushing to GitHub, and reviewing diagram changes via commit diffs. - Tool selection guidance: Provides a decision table for choosing between whiteboard sketching, Mermaid, and Draw.io based on audience and durability needs. - Use Case: A learner who completed hand-drawn diagram exercises translates their deployment runbook, login sequence, order state machine, and e-commerce ER model into Mermaid, commits them to a GitHub repo, and sees them render in the README. ## Quick Start Ask the mentor to start the Mermaid diagrams-as-code project and walk you through rendering your first flowchart in VS Code.
