technical-diagramslisted

Provides Mermaid diagram syntax, best practices, and styling rules for technical visualizations. Use when creating diagrams, flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, architecture diagrams, C4 diagrams, visualizations, or any visual documentation in markdown. Always use this skill when generating or updating Mermaid code blocks.
sequenzia/agent-alchemy · ★ 38 · Code & Development · score 83

Install: claude install-skill sequenzia/agent-alchemy

# Technical Diagrams Mermaid is the standard for all technical diagrams in this project. It renders natively in GitHub, GitLab, MkDocs (with Material theme), and most modern documentation platforms. This skill provides: - **Critical styling rules** to ensure readability (especially color contrast) - **Quick reference** examples for common diagram types - **Reference files** for advanced syntax when building complex diagrams Always wrap Mermaid code in fenced code blocks with the `mermaid` language identifier. --- ## Why Mermaid **Native rendering** — GitHub, GitLab, Notion, MkDocs, and Docusaurus render Mermaid blocks without plugins or build steps. No external image generation tools needed. **Text-based and diffable** — Diagrams live alongside code in version control. Changes appear in pull request diffs, making reviews straightforward and history trackable. **No external tools** — No Lucidchart exports, no draw.io XML files, no PNG screenshots that go stale. The diagram source is the single source of truth. **Maintainable** — Updating a diagram means editing text, not wrestling with a GUI. Refactoring a component name? Find-and-replace works on diagrams too. **Consistent** — A shared syntax produces visually consistent diagrams across all documentation, regardless of who authored them. --- ## Critical Styling Rules **This is the most important section.** Light text on light backgrounds is the most common Mermaid readability issue. Follow these rules strictly.