Diagrams & Architecture
SaaS, open source and skills for diagrams & architecture work — with the limits of each written down.Before you pick
What decides it
The update path, not the first render. If the next version means re-drawing instead of re-running a source, the diagram stops matching the system.
What to avoid
Generated layouts need hand-tidying, and the tidying lives nowhere in the source. Regenerating discards it, so people stop regenerating and the diagram freezes.
What is changing
Generation is moving from prompt-to-picture toward reading the repository or infrastructure state, then regenerating in CI so the diagram's diff shows in review.
SaaS
Hosted products you sign up for.Leading
Established picks, at the top of today's aggregate.
- 1Eraser (DiagramGPT)The top pick for technical diagrams — architecture, system design, ERDs and sequence flows generated from a text description.
- 2Mermaid ChartAI-generated diagram-as-code you can version-control, with the widest integration support of any option.
- 3LucidchartBroadest diagram-type coverage on an editable, collaborative canvas — strongest for enterprise, though more template- than AI-driven.
- 4Whimsical AIFast, beautiful flowcharts and mind maps — the speed-and-aesthetics winner for lighter-weight diagramming.
- 5Miro AICollaborative design sessions on an infinite canvas, best when a team is diagramming together in real time.
Emerging
Newer challengers, surfaced by two or more sources.
- 1CodePic
- 2MermaidViewerBrowser Mermaid editor with live preview, GPT-4 generation and SVG/PNG export; the free tier caps daily diagrams and watermarks exports.
- 3DOCKRConnects to a GitHub, GitLab or Bitbucket repo and regenerates prose docs, sequence, class and activity diagrams on every push.
- 4AI Graph MakerFree web tool that turns text or data into Mermaid flowcharts, mind maps, Gantt and ER diagrams, exported as PNG, SVG or Mermaid.
Open source
Repositories you run yourself.Leading
- 1MermaidThe de-facto text-to-diagram standard (~89.4k★) — natively rendered in GitHub/GitLab Markdown, making it the default diagram-as-code format agents produce for architecture, flow and sequence diagrams.
- 2ExcalidrawThe dominant open-source virtual whiteboard (~128.3k★) — hand-drawn aesthetic, hugely used for freeform architecture sketches and system diagrams.
- 3Diagrams (mingrammer)The leading diagram-as-code library for cloud/system architecture (~42.5k★) — draw AWS/GCP/Azure/Kubernetes architecture from Python.
- 4D2Fast-rising modern diagram scripting language (~24.8k★) — cleaner syntax than PlantUML with strong automatic layout.
- 5tldrawInfinite-canvas whiteboard SDK (~49.2k★) — the toolkit developers build collaborative diagramming apps on.
Emerging
- 1Cocoon-AI/architecture-diagram-generatorClaude skill producing a dark-themed system diagram as a single self-contained HTML/SVG file with PNG and PDF export.
- 2Shailender-Youtube/Architecture_Diagrams_Python_AICompanion repo for two YouTube walkthroughs on generating Azure architecture diagrams with Python, including Bicep and Terraform import demos.
- 3GBSOSS/ai-drawioClaude Code plugin that writes draw.io XML from a prompt and renders it in Chrome via a local server for preview.
- 4Itz-Agasta/OpenDiagramHosted and self-hostable app that turns a plain-English system description into an editable Excalidraw canvas of services, data flows and cloud diagrams.
- 5carlosmgv02/diagram-ai-generatorMCP server for Claude Desktop that renders cloud architecture diagrams as PNG or SVG using the Python diagrams library's real provider icons.
Skills
Skills you drop into a coding agent.Leading
- 1Mermaid Diagrams (softaworks agent-toolkit)The most-adopted diagram Claude Code skill (~2.2k★, whole toolkit) — a mermaid-diagrams SKILL.md for flowcharts, sequence and architecture diagrams.
- 2Mermaid Skill (Agents365-ai)The most complete standalone Mermaid skill (~146★) — natural language to validated .mmd with 11+ diagram types and mmdc/Kroki rendering to PNG/SVG/PDF.
Emerging
- 1tt-a1i/archifyAgent skill that renders architecture, workflow, sequence and data-flow diagrams as self-contained interactive HTML, with PNG, SVG and video export.
- 2konraddzbik/architecture-diagram-skillAgent skill producing one HTML file where you click through flows and watch animated packets move between draggable nodes, for reviews and onboarding.
- 3muthuishere/hand-drawn-diagramsAgent skill that renders monochrome Excalidraw sketches from a prompt, returning a hosted edit link plus stroke-by-stroke animated SVG and PNG.
- 4ejklock/living-docs-skillAgent skill that governs a repo's documentation set, from ADRs and PRDs to Mermaid diagrams, with a CLI checker enforcing no drift.
- 5aetox-skills/senior-architect-agentAgent skill that reads an existing codebase and outputs module maps, Mermaid diagrams, a debt register and handoff notes for other agents.