# Diagrams: Mermaid or blueprint SVG

> Picks Mermaid or a hand-drawn blueprint SVG based on where the diagram will live, then draws flowcharts, sequences, ERDs, C4 views and state machines.

Canonical: https://mikereams.com/ai/diagrams

Skill · Original · Diagrams · updated 2026-10-28. Part of the [AI Library](https://mikereams.com/ai).

What you get: A diagram that renders where it is going: a Mermaid block for GitHub or Obsidian, or a clean grid-aligned SVG for docs and slides.

- One concept per diagram: split rather than cram.
- Component state charts pair with the States section of a design handoff spec.

Files (MIT): [SKILL.md](https://mikereams.com/ai-files/diagrams/SKILL.md)

Install with the skills CLI, from https://github.com/solventarchitect/skills:

```
npx skills add solventarchitect/skills --skill diagrams
```

Tags: mermaid, svg, flowchart, C4, state machine