Mermaid Gallery

This page is a visual smoke test for Mermaid diagrams in the reader. Use it after renderer changes or Mermaid upgrades to confirm diagrams render as expandable figures rather than ordinary code blocks.

Flowchart

flowchart LR
  author[Author] --> preview[Preview]
  preview --> branch[Content branch]
  branch --> review[Pull request]
  review --> publish[Published docs]

Sequence diagram

sequenceDiagram
  participant Browser
  participant Reader
  participant Roles as GetRoles
  Browser->>Reader: Sign in
  Reader->>Roles: Resolve roles
  Roles-->>Reader: hub-reader
  Reader-->>Browser: Render allowed content

State diagram

stateDiagram-v2
  [*] --> Draft
  Draft --> Review: open PR
  Review --> Published: merge
  Review --> Draft: changes requested
  Published --> [*]

Class diagram

classDiagram
  class Page {
    title
    slug
    access
  }
  class ImageAsset {
    blobPath
    alt
  }
  Page "1" --> "many" ImageAsset

Entity relationship diagram

erDiagram
  PAGE ||--o{ IMAGE : references
  PAGE {
    string slug
    string access
  }
  IMAGE {
    string blobPath
    string alt
  }

User journey

journey
  title Import a Word document
  section Convert
    Upload .docx: 4: Author
    Review Markdown: 3: Author
  section Publish
    Save branch: 4: Author
    Open PR: 4: Reviewer

Gantt

gantt
  title Release cutover
  dateFormat  YYYY-MM-DD
  section Deploy
  Build artifacts     :done, 2026-06-01, 1d
  Validate staging    :active, 2026-06-02, 1d
  Production approval :2026-06-03, 1d

Pie

pie title Example content mix
  "Guides" : 42
  "Reference" : 28
  "Deployment" : 18
  "Administration" : 12

Mindmap

mindmap
  root((Hub Docs))
    Reader
      Search
      Access
      Theme
    Editor
      Markdown
      Images
      Imports
    Pipelines
      CI
      Deploy

Timeline

timeline
  title Hub Docs lifecycle
  Draft : Author edits content
  Review : Pull request validation
  Release : Production cutover

Git graph

gitGraph
  commit id: "main"
  branch feature
  checkout feature
  commit id: "edit"
  checkout main
  merge feature
  branch release
  checkout release
  commit id: "cutover"

Quadrant chart

quadrantChart
  title Content prioritization
  x-axis Low impact --> High impact
  y-axis Low effort --> High effort
  quadrant-1 Strategic bets
  quadrant-2 Plan carefully
  quadrant-3 Fill-ins
  quadrant-4 Quick wins
  Import workflow: [0.78, 0.52]
  Theme persistence: [0.62, 0.18]

Requirement diagram

requirementDiagram
  requirement reader_auth {
    id: 1
    text: Reader sign-in resolves roles
    risk: high
    verifymethod: test
  }
  element get_roles {
    type: function
    docref: GetRoles
  }
  get_roles - satisfies -> reader_auth

C4 context

C4Context
  title Hub Docs system context
  Person(author, "Author")
  System(reader, "Reader")
  System(editor, "Editor")
  System_Ext(ado, "Azure DevOps")
  Rel(author, reader, "Reads docs")
  Rel(author, editor, "Edits docs")
  Rel(editor, ado, "Creates branches and PRs")

Sankey

sankey-beta
  Word import,Markdown preview,10
  Markdown preview,Working branch,7
  Markdown preview,Import PR,3
  Working branch,Pull request,7

XY chart

xychart-beta
  title "Content growth"
  x-axis ["Apr", "May", "Jun"]
  y-axis "Pages" 0 --> 200
  bar [120, 160, 185]