ArchFlow
Real-time software architecture diagramming with multi-format vector, Retina PNG, and PDF exports.
Google Cloud • AI & Developer Infrastructure
Architecture Diagramming as Code with Mermaid.js 11
ArchFlow enables software engineers and solutions architects to compose production-grade system topologies, sequence diagrams, and database schemas directly using intuitive text-based syntax. High-DPI canvas rasterization renders crisp Retina vectors for your design docs, Jira tickets, and GitHub pull requests.
How It Works (In-Memory Execution)
- Declaration Syntax: Write diagrams using declarative keywords like flowchart, sequenceDiagram, erDiagram, or stateDiagram.
- Reactive Compilation: The Mermaid 11 ESM engine compiles your text into an in-memory XML Document Object Model (DOM) without network hops.
- High-DPI Rasterization: When downloading or copying, the SVG string is parsed into a virtual HTML5 2D Canvas with a 1x to 4x scaling multiplier to guarantee crisp typography on high-density 4K/Retina screens.
- Direct Clipboard Integration: Use the modern browser ClipboardItem API to paste transparent PNG assets directly into Notion, Slack, Figma, or Confluence.
Mermaid Syntax Cheat Sheet
| Parameter / Token | Description | Example |
|---|---|---|
| flowchart TB / LR | Creates top-to-bottom or left-to-right directed system diagrams. | flowchart LR; Client --> API --> DB; |
| sequenceDiagram | Generates synchronous/asynchronous message exchange lifecycles. | Alice->>Bob: Hello; Bob-->>Alice: Hi |
| erDiagram | Renders relational database entities, primary keys, and cardinality relations. | USERS ||--o{ POSTS : writes |
| stateDiagram-v2 | Maps finite state machine transitions and composite nested states. | [*] --> Active --> [*] |
Frequently Asked Questions
Q: Why write diagrams as code instead of using drag-and-drop tools?
Diagrams as code can be version-controlled in Git, diffed, automated in CI/CD pipelines, and shared without binary file bloat. It eliminates tedious manual pixel alignment.
Q: Are my architecture diagrams saved on a remote server?
No. ArchFlow is 100% in-memory and air-gapped. Nothing is transmitted to external servers. When sharing, the state is compressed directly into the URL hash.
Q: How do I export Retina 4K images for presentation slides?
Select 2x, 3x, or 4x scale in the canvas toolbar. The rasterizer will double or quadruple the internal canvas pixel density before generating your PNG or WebP download.