Diagrams

Overview

Diagrams let you create visual representations of your system architecture, data flows, sequences, and more — right inside your map workspace. ArcLume uses Mermaid, an open-source diagramming language that renders diagrams from plain text markdown.

You write (or generate) Mermaid syntax on the left, and the diagram renders in realtime on the right. No drag-and-drop tools needed — just text that lives alongside your stories and transcripts.

Creating a diagram

Open any map and click the Diagrams tab in the sidebar. Click New Diagram, give it a title, and the editor opens immediately.

The diagram editor

The editor is a split-pane view:

• Left pane — write Mermaid markdown. Changes auto-save as you type.
• Right pane — live preview of the rendered diagram, updated in realtime.

On mobile, toggle between the editor and preview using the icons in the toolbar.

Supported diagram types

ArcLume supports all Mermaid diagram types, including:

• Flowcharts — decision trees, process flows, architecture overviews
• Sequence diagrams — API call flows, authentication sequences, service interactions
• Entity-relationship diagrams — database schemas, data model relationships
• Class diagrams — object hierarchies, module structures
• State diagrams — state machines, workflow states
• Gantt charts — project timelines, sprint planning
• Mindmaps — brainstorming, feature breakdowns

For the full syntax reference, see the Mermaid documentation.

Quick examples

A simple flowchart:

graph TD
    A[User Request] --> B{Authenticated?}
    B -->|Yes| C[Process Request]
    B -->|No| D[Redirect to Login]
    C --> E[Return Response]

A sequence diagram:

sequenceDiagram
    Frontend->>API: POST /login
    API->>Database: Validate credentials
    Database-->>API: User record
    API-->>Frontend: JWT token

Attaching diagrams to stories

Diagrams can be linked to stories for additional context. In the diagram editor, click the Stories button in the toolbar to see a dropdown of stories in your map. Select a story to attach it, or click the unlink icon to detach.

This is useful for giving reviewers and developers visual context about the architecture or flow a story relates to.

Exporting diagrams

From the diagram editor toolbar, you can export your diagram in two formats:

• SVG — scalable vector format, ideal for documentation and presentations
• PNG — raster image at 2x resolution, suitable for embedding anywhere

Tips

• Start with a simple diagram and iterate. Mermaid syntax is forgiving — the preview updates as you type so you can see issues immediately.
• If the preview shows "Invalid Mermaid syntax", check the Mermaid docs for the correct syntax for your diagram type.
• Use diagrams alongside your stories to communicate architecture decisions that are hard to express in text alone.