Start from a diagram, not a blank page

Product delivery flow

A left-to-right flowchart for shipping work end to end.

Arranged layout included

flowchart LR
  A[Idea] --> B[Spec]
  B --> C{Ready?}
  C -->|No| B
  C -->|Yes| D[Build]
  D --> E[Review]
  E --> F[Ship]

Auth sequence

Login handshake between client, app, and identity provider.

sequenceDiagram
  actor U as User
  participant A as App
  participant I as IdP
  U->>+A: Sign in
  A->>+I: OAuth request
  Note right of I: Consent screen
  I-->>U: Consent
  U->>I: Approve
  I-->>-A: Token
  alt Session ok
    A-->>U: Session
  else Denied
    A-->>U: Error
  end
  deactivate A
  opt Remember device
    A->>A: Store cookie
  end

Simple data model

Entity relationship sketch for users, folders, and diagrams.

Arranged layout included

erDiagram
  USER ||--o{ FOLDER : owns
  USER ||--o{ DIAGRAM : owns
  FOLDER ||--o{ DIAGRAM : contains
  USER }o..o{ DIAGRAM : favorites
  USER {
    string id PK
    string email UK
  }
  FOLDER {
    string id PK
    string name
  }
  DIAGRAM {
    string id PK
    string folderId FK
    string title
    string visibility
  }

Diagram lifecycle

States from draft through shared and archived.

Arranged layout included

stateDiagram-v2
  [*] --> Draft
  Draft --> Editing
  Editing --> Draft
  Editing --> Shared
  Shared --> Editing
  Shared --> Archived
  Archived --> [*]

Workspace map

High-level map of SayDiagram capabilities.

mindmap
  root((SayDiagram))
    Create
      Editor
      Import mmd
    Organize
      Folders
      Favorites
    Share
      Links
      Export

Editor modules

Class-style overview of preview and arrange surfaces.

classDiagram
  class Editor {
    +content
    +save()
  }
  class Preview {
    +render()
  }
  class Arrange {
    +layout
    +exportPng()
  }
  Editor --> Preview
  Editor --> Arrange

History of Social Media

A chronological timeline with sections for early years and growth.

timeline
    title History of Social Media
    section Early years
        2002 : LinkedIn
        2004 : Facebook
             : Google
    section Growth
        2005 : YouTube
        2006 : Twitter

Login requirements

SysML-style requirements linked to elements with satisfies and verifies relationships.

requirementDiagram
  direction LR

  requirement parent_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
  }

  functionalRequirement child_req {
    id: 1.1
    text: the second test text.
    risk: low
    verifymethod: inspection
  }

  performanceRequirement perf_req {
    id: 1.2
    text: the third test text.
    risk: medium
    verifymethod: demonstration
  }

  element sim {
    type: simulation
  }

  element suite {
    type: "test suite"
    docref: github.com/all_the_tests
  }

  parent_req - contains -> child_req
  parent_req - contains -> perf_req
  sim - satisfies -> child_req
  suite - verifies -> perf_req
  parent_req <- copies - suite

Traffic sources

A pie chart of website traffic mix by channel.

pie title Traffic sources
  "Organic search" : 42
  "Paid ads" : 28
  "Social" : 18
  "Referral" : 12

Product launch plan

A Gantt chart with design, build, and ship sections.

gantt
  title Product launch plan
  dateFormat YYYY-MM-DD
  section Design
  Research     :a1, 2026-07-01, 5d
  Wireframes   :a2, after a1, 5d
  section Build
  Develop MVP  :b1, after a2, 14d
  QA           :b2, after b1, 5d
  section Ship
  Soft launch  :c1, after b2, 3d
  Public launch :c2, after c1, 7d

Feature branch merge

A git graph with a feature branch merged back to main.

gitGraph
  commit id: "init"
  commit id: "setup"
  branch feature
  checkout feature
  commit id: "api"
  commit id: "ui"
  checkout main
  merge feature
  commit id: "release"

Notes app context

A C4 system context diagram for a notes SaaS.

C4Context
  title System Context for Notes App
  Person(user, "User", "Creates and shares notes")
  System(app, "Notes App", "Web notes product")
  System_Ext(email, "Email Provider", "Transactional email")
  System_Ext(storage, "Object Storage", "File attachments")
  Rel(user, app, "Uses", "HTTPS")
  Rel(app, email, "Sends email", "SMTP")
  Rel(app, storage, "Stores files", "S3 API")

Budget allocation

A Sankey diagram of budget flowing into teams and workstreams.

sankey

Budget,Engineering,50
Budget,Design,20
Budget,Marketing,30
Engineering,Backend,30
Engineering,Frontend,20
Marketing,Ads,18
Marketing,Content,12

Themed delivery flow

A flowchart using a named Mermaid theme plus classDef accents for key nodes.

%%{init: {'theme':'forest'}}%%
flowchart LR
  A[Idea]:::accent --> B[Spec]
  B --> C{Ready?}
  C -->|Yes| D[Ship]:::done
  classDef accent fill:#dbeafe,stroke:#2563eb,color:#1e3a8a
  classDef done fill:#dcfce7,stroke:#16a34a,color:#14532d