grid: 28px - v0.1-alpha

Invite-only Alpha - Mermaid to Ideagram

Architecture diagrams that agents can understand.

Ideagram is a diagramming platform for software architects. Turn Mermaid into polished UML, C4, flowchart, and sequence diagrams with Pages, real-time collaboration, version history, a portable read-only viewer, and an MCP server for agents, CLI tools, and CI workflows.

Request an invitationOpen source · soon

SUPPORTS

UML/C4 Model/Flowcharts/Mermaid Import/Portable Viewer/MCP Server

system-context.ideagramC4 - L1

100%

↖□╱

01 - The Problem

The tools don't match the way architects think.

Generic Whiteboards

Infinite canvas. Zero architectural meaning.

Draw boxes all day. Name them anything. Connect them with arrows that mean nothing. When the PR lands and the system changes, your whiteboard stays exactly the same, and gradually becomes fiction.

FlexibleMeaninglessDisposable

Enterprise Modeling Tools

Structured. Rigid. Built for committees.

Semantic precision buried under weeks of setup, expensive licenses, XML-based formats, and workflows designed for enterprise governance, not the architect trying to reason through a system in an afternoon.

StructuredRigidExpensive

"There is a missing tool: visual-first, semantically aware, built specifically for the way software architects think."

02 - Why Ideagram

Architecture diagrams should be visual, semantic, versioned, close to Pages, and readable by agents.

Ideagram is not just a place to draw boxes and arrows. It is a software architecture workspace where diagrams, notes, exports, and automation share the same source of truth.

01

Visual

A model you can see is a model you can reason about. Diagrams are the primary interface for understanding software structure, not an afterthought.

02

Semantic

Nodes and relationships carry meaning. Ideagram understands C4 layers, UML stereotypes, and domain boundaries, so your canvas knows what it's modeling.

03

Versioned

Every architectural change is a decision. Decisions deserve history. Track how your system evolved, when it changed, and why alongside your code.

04

Close to Pages

Great architecture notes live near the system. Keep ADRs, runbooks, and project pages beside the diagrams they explain.

05

Portable

The rendering layer can travel into other apps as a read-only viewer, while the MCP server exposes architecture as structured data for agents, CLI tools, and CI jobs.

The canvas

Infinite canvas. Semantic diagram model. Mermaid panel. Side by side.

My CompanyPro/Main Workspace/Default Project

New DiagramC4 Context

Saved - just now

Export

INSIDE/Root/SaaS Platform

Drag from palette to canvas below - Double-click container to go deeper

NotesNew Diagram

Edit

Preview

Add notes, context, or an ADR for "New Diagram"...

Supports Markdown; use the Preview tab to render it.

Markdown - auto-saved

75%

Properties

Software System

SaaS Platform

C4 Context diagram

General

Style

Identity

Name

SaaS Platform

Description

Optional notes...

Technology

e.g. Node.js, PostgreSQL

Nested diagram

6 components inside

Changes sync with the canvas in real time

03 - From Idea To Architecture

Start a project. Watch it become an architecture.

Model the idea, get a diagram, record the decision, leave a note — the same loop, every time, whether you're clicking around Ideagram or typing into an agent. The MCP server isn't a read-only API bolted on after the fact: it's the same creation path the in-app editor uses, open to your CLI, your IDE, or any agent that speaks MCP.

IdeagramCLICursorClaude CodeAny MCP agent

ideagram.dev/mcplive

1

Model the idea

Describe the system in plain language or Mermaid. Ideagram creates the workspace, project, and starting diagram structure for you.

2

See it as a diagram

C4 and UML diagrams render live on the canvas — components, connections, and layout, editable the moment they exist.

3

Capture the decisions

Write ADRs and specs as you go: status, context, consequences. Linked back to the diagram they explain, not buried in a separate wiki.

4

Keep the notes with the architecture

Pages and Notes live in the same project as the diagrams, so the "why" never drifts away from the "what".

idea - model - diagram - decision - notes - documented architecture

04 - Features

Everything software architects need in one canvas.

Not a generic whiteboard. Ideagram is built around semantic architecture diagrams, Pages, Mermaid, collaboration, and MCP automation.

UML, C4, and flowcharts

Create software architecture diagrams with diagram-aware nodes, relationships, and visual conventions for UML, C4, sequence, and flowchart views.

Nested diagrams

Double-click any container to drill into it. Navigate system hierarchy with breadcrumbs while each level keeps its own components and connections.

Mermaid to Ideagram

Paste Mermaid and render it as a polished Ideagram view instead of a raw Mermaid diagram. Keep code as the editing surface when text is the right workflow.

Portable read-only viewer

Embed Ideagram-style diagrams in other apps without taking the full editor. The viewer focuses on rendering Mermaid and RenderGraph with a consistent visual language.

MCP server

Model, diagram, and document a project from a CLI, Cursor, Claude Code, or any MCP agent — the same create-and-document loop as the in-app editor, live at ideagram.dev/mcp.

Version history

Track diagram evolution over time. Browse previous snapshots, compare architectural changes, and restore earlier states when needed.

Real-time collaboration

See teammates' cursors live, collaborate without overwrites, and use locks when someone is actively editing a diagram.

Workspace hierarchy

Organize work by Organization, Workspace, Project, and Diagram so architecture maps to how teams actually manage systems.

DSL code editor

Use the Monaco-powered editor to work with diagrams as structured text, with syntax highlighting, autocomplete, and read-only visual preview.

Permissions and roles

Control access with owner, admin, editor, and viewer roles across organizations, workspaces, and projects.

Pages beside diagrams

Keep ADRs, runbooks, onboarding notes, and project context in Pages right beside the diagrams they explain.

05 - Public release

Open source release, coming soon.

We are preparing the public release. Until then, the hosted alpha is the place to explore Ideagram and share feedback with the team.

Public release in preparation

Repository access and licensing details will be announced when the release is ready.

Portable architecture data

Mermaid export keeps diagram structure portable throughout the alpha.

Feedback-led roadmap

Alpha feedback guides what we build next.

Public repository · coming soon

release status
status preparing public repository
access available soon
today join the hosted alpha

06 - Pages

project / pagesalpha

ArchitectureOverviewADR-014RunbooksOnboardingGetting started

# ADR-014: Session storage

We store refresh tokens server-side, never in localStorage. See [Auth Diagram] for the full flow.

Linked to: Authentication Domain diagram

Pages keep architecture context with the diagrams.

Pages gives every project a Confluence-style workspace for folders, markdown pages, and notes living right next to the diagrams they describe. Write the why where the what already lives.

Pages live next to the diagrams

Folders, pages, and notes are scoped to the same project as your architecture, instead of living in a separate wiki that drifts out of sync.

Markdown, not a proprietary format

Every page is plain markdown. Write ADRs, runbooks, onboarding notes, and design rationale the way your team already writes docs.

Embed and link back to diagrams

Reference a diagram directly from a page, and see which pages reference a diagram from the canvas side.

07 - AI Assistance

mermaid - system-context.mmd
1C4Context
2  title System Context - SaaS Platform
3
4  Person(admin, "Admin")
5  Person(subscriber, "Subscriber")
6
7  System(saas, "SaaS Platform", "Core application")
8
9  System_Ext(billing, "Billing Provider", "[Stripe]")
10  System_Ext(email, "Email Service")
11  System_Ext(analytics, "Analytics", "[Mixpanel]")
12
13  Rel(admin, saas, "Manage plans", "HTTPS")
14  Rel(subscriber, saas, "Subscribe", "HTTPS")
15  Rel(saas, billing, "Charge & invoices", "REST")
16  Rel(saas, email, "Billing notifications")
17  Rel(saas, analytics, "Usage & churn events")

AI assistance grounded in architecture data.

Ask Ideagram to generate component scaffolding, explain layer relationships, or export your canvas to Mermaid syntax. AI workflows should operate through the same structured diagram data exposed by MCP, not through screenshots or disconnected prompts.

Generate scaffolding

Describe a system in plain English and Ideagram will generate the C4 structure, containers, and relationships to get you started.

Explain layer decisions

Ask why a boundary exists, what should be a container vs a system, or whether an external dependency belongs in context or container level.

Export to Mermaid

One click exports any diagram to Mermaid-compatible DSL for use in your docs and development workflow.

08 - Ownership

Your diagrams. Your infrastructure.

Ideagram runs on your own Supabase instance. Your data never passes through our servers; it lives in your Postgres, under your RLS policies, in your region.

If Ideagram shuts down tomorrow, your stack keeps running. Export to Mermaid, migrate to any tool that speaks plain text. No hostage-ware.

Self-hosted on your own Supabase

Row-Level Security policies you control

Export to Mermaid at any time

Zero telemetry in self-hosted mode

Data residencyYour Supabase region

Auth providerSupabase Auth (PKCE)

Realtime engineSupabase Realtime

Export formatsMermaid - JSON - PNG

LicenseMIT

Private Alpha - Invite based

Start building architecture diagrams that stay useful.

Get an invitation, test Mermaid-to-Ideagram rendering, and explore the portable viewer. Ideagram is open for early feedback from software architects and engineering teams.

Request an invitation Read the DocsOpen source · coming soon

Public release details are coming soon

Contact

Let’s talk about Ideagram.

Questions, feedback, or an idea to share? Send us a note and we’ll get back to you.