Diagrams in ChapterWise

ChapterWise supports Mermaid.js diagrams as a content type within codex files. This enables flowcharts, sequence diagrams, entity relationships, Gantt charts, and 20+ other diagram types to live alongside your narrative content.

Features

• 23 diagram types - Flowcharts, sequences, ER, Gantt, pie, mindmaps, and more
• Inline or external - Write Mermaid syntax directly or include .mermaid files
• Dark mode support - Automatic theme switching
• Width control - Full, half, or third width layouts
• Node-level diagrams - Use type: diagram on a node for diagram-only entries
• Mobile responsive - Horizontal scrolling on small screens

Quick Start

1. Inline Diagram (Simplest)

Add a diagram directly in your codex file:

content:
  - key: workflow
    name: "Story Workflow"
    type: diagram
    width: 1/1
    value: |
      graph LR
        A[Draft] --> B[Review]
        B --> C[Edit]
        C --> D[Publish]

2. External .mermaid File

Reference an existing Mermaid file:

content:
  - key: architecture
    type: diagram
    width: 1/1
    include: /diagrams/architecture.mermaid

3. Diagram Node

Make an entire node a diagram:

name: "Character Relationships"
type: diagram
body: |
  graph TD
    A[Hero] -->|mentors| B[Sidekick]
    A -->|rivals| C[Antagonist]
    B -->|admires| A

Documentation

When to Use Diagrams

Good for: - Character relationship maps - Story structure flowcharts - Project timelines (Gantt charts) - World-building hierarchies - System architecture - Process flows and decision trees

Not ideal for: - Simple lists (use content with text type) - Tabular data with calculations (use spreadsheet type) - Long-form text (use body field)