Mermaid

The Mermaid plugin renders diagrams and flowcharts from Mermaid syntax.

Installation

pnpm add @teamflojo/floimg-mermaid

Registration

import createClient from '@teamflojo/floimg';
import mermaid from '@teamflojo/floimg-mermaid';

const floimg = createClient();
floimg.registerGenerator(mermaid());

Usage

const diagram = await floimg.generate({
  generator: 'mermaid',
  params: {
    code: `
      graph TD
        A[Start] --> B{Decision}
        B -->|Yes| C[Action 1]
        B -->|No| D[Action 2]
        C --> E[End]
        D --> E
    `
  }
});

Parameters

Parameter	Type	Required	Description
code	string	Yes	Mermaid diagram definition
theme	string	No	Theme: ‘default’, ‘dark’, ‘forest’, ‘neutral’
backgroundColor	string	No	Background color (default: white)
width	number	No	Max width in pixels

Diagram Types

Flowchart

await floimg.generate({
  generator: 'mermaid',
  params: {
    code: `
      flowchart LR
        A[Input] --> B[Process]
        B --> C[Output]
    `
  }
});

Sequence Diagram

await floimg.generate({
  generator: 'mermaid',
  params: {
    code: `
      sequenceDiagram
        participant Client
        participant Server
        participant Database

        Client->>Server: Request
        Server->>Database: Query
        Database-->>Server: Results
        Server-->>Client: Response
    `
  }
});

Class Diagram

await floimg.generate({
  generator: 'mermaid',
  params: {
    code: `
      classDiagram
        class Animal {
          +name: string
          +age: int
          +makeSound()
        }
        class Dog {
          +breed: string
          +bark()
        }
        Animal <|-- Dog
    `
  }
});

State Diagram

await floimg.generate({
  generator: 'mermaid',
  params: {
    code: `
      stateDiagram-v2
        [*] --> Idle
        Idle --> Processing: Start
        Processing --> Complete: Success
        Processing --> Error: Failure
        Complete --> [*]
        Error --> Idle: Retry
    `
  }
});

Entity Relationship Diagram

await floimg.generate({
  generator: 'mermaid',
  params: {
    code: `
      erDiagram
        USER ||--o{ ORDER : places
        ORDER ||--|{ LINE_ITEM : contains
        PRODUCT ||--o{ LINE_ITEM : "ordered in"
    `
  }
});

Gantt Chart

await floimg.generate({
  generator: 'mermaid',
  params: {
    code: `
      gantt
        title Project Timeline
        dateFormat YYYY-MM-DD
        section Phase 1
        Design    :a1, 2024-01-01, 30d
        Development :a2, after a1, 60d
        section Phase 2
        Testing   :a3, after a2, 20d
        Launch    :a4, after a3, 10d
    `
  }
});

Pie Chart

await floimg.generate({
  generator: 'mermaid',
  params: {
    code: `
      pie title Browser Market Share
        "Chrome" : 65
        "Safari" : 19
        "Firefox" : 10
        "Other" : 6
    `
  }
});

Themes

// Dark theme
await floimg.generate({
  generator: 'mermaid',
  params: {
    code: `graph TD; A-->B;`,
    theme: 'dark'
  }
});

// Forest theme
await floimg.generate({
  generator: 'mermaid',
  params: {
    code: `graph TD; A-->B;`,
    theme: 'forest'
  }
});

See Also

• Generate - Core generation method
• QuickChart - Data charts
• D3 - Custom visualizations

---

Want to experiment visually? Try Mermaid in floimg-studio →