Whiteboards & Diagrams

The Problem

Visual planning and diagramming are disconnected from development. Architecture diagrams live in Figma or Miro, go stale the moment code changes, and there is no way for your AI agents to create or read them. You end up context-switching to a separate tool, manually redrawing something that could be derived from the codebase, and then forgetting to update it when the design evolves.

What's Built

Whiteboards Tab

Every project in Sidespace has a Whiteboards tab alongside Home, Roadmap, Kanban, and Docs. Diagrams are project-scoped: they live inside the project they describe and travel with it. No separate tool, no external links, no orphaned files.

Mermaid Rendering

Diagrams are authored in Mermaid syntax and rendered as SVG. You write structured diagram code and get a clean visual output. Supported diagram types include flowcharts, sequence diagrams, entity-relationship diagrams, state diagrams, and anything else Mermaid supports.

This is a deliberate choice: text-based diagram code is diffable, versionable, and -- critically -- something an AI agent can produce. The rendering pipeline converts Mermaid source to SVG, so diagrams are always crisp and scalable.

Agent-Invocable Diagrams

The sidespace_generate_diagram MCP tool lets any connected agent create diagrams programmatically. Hoshi can generate an architecture diagram from conversation context. Claude Code can visualize module dependencies or call graphs from the actual codebase. Any agent with access to the MCP endpoint can produce a diagram without human intervention.

This closes the loop that makes diagrams go stale: the same agents that change the code can regenerate the diagrams that describe it.

Visual Canvas

The Whiteboards tab includes a tldraw-based canvas editor for freeform visual planning. You can arrange generated diagrams, add annotations, draw connections, and sketch ideas that do not fit neatly into structured diagram syntax. The canvas is a general-purpose visual surface. Use it for whiteboarding sessions, architecture brainstorming, or extending agent-generated diagrams with your own context.

Where It's Heading

Near-term priorities include richer diagram types (C4 model, dependency graphs pulled directly from package manifests), diagram-to-code pathways where visual edits flow back into structured representations, and collaborative editing so multiple team members can work on the same canvas in real time.