stemedb/docs/presentations

Episteme Presentations

Data-driven presentations for Episteme. Define sequences in YAML, generate Mermaid diagrams and Reveal.js slides.

Quick Start

npm install
npm run dev    # Generate + serve

Then open http://localhost:3000

Architecture

presentations/
├── data/
│   └── agile-agent-team.yaml    # Source of truth
├── generated/                    # Auto-generated (gitignored)
│   ├── *.mmd                    # Mermaid diagrams
│   └── *.json                   # Reveal.js data
├── reveal/
│   ├── index.html               # Reveal.js shell
│   ├── theme.css                # Clean black dark theme
│   └── renderer.js              # Reads JSON, renders slides
└── scripts/
    └── generate.ts              # YAML → Mermaid + JSON

Commands

Command	Description
npm run generate	Generate Mermaid and JSON from YAML
npm run serve	Serve the reveal directory
npm run dev	Generate + serve

Data Schema

See data/agile-agent-team.yaml for the full schema. Key elements:

Actors

actors:
  research_agent:
    id: RA
    label: "Research Agent"
    color: "#3B82F6"

Sequences

sequences:
  - id: catastrophe
    title: "The Catastrophe"
    subtitle: "When Proposals Look Like Decisions"
    steps:
      - from: research_agent
        to: episteme
        action: assert
        label: "Store RFC finding"
        data: { ... }
        note: "RFC proposes ES256. Stored as PROPOSED."
        danger: true  # Visual indicator
        callout: "lifecycle: proposed"  # Highlighted badge

Step Properties

Property	Type	Description
from	string	Actor key
to	string	Actor key
action	string	Action type (assert, query, response, etc.)
label	string	Message label
data	object	Structured data to display
note	string	Explanation text
callout	string	Highlighted badge text
danger	boolean	Red styling
warning	boolean	Amber styling
success	boolean	Green styling

Mermaid Output

Each sequence generates a standalone .mmd file. Use with:

• GitHub markdown (renders automatically)
• Mermaid CLI: mmdc -i file.mmd -o file.svg
• Mermaid Live Editor: https://mermaid.live

Embedding in Public Site

The Reveal.js presentation is self-contained. To embed:

1. Copy reveal/ directory to your site
2. Copy generated/*.json to your site
3. Update PRESENTATION_DATA_URL in index.html

Or iframe embed:

<iframe src="/presentations/reveal/index.html" width="100%" height="600"></iframe>

Theme Customization

Edit reveal/theme.css. Key variables:

:root {
  --bg-primary: #000000;
  --bg-card: #111111;
  --accent-episteme: #FBBF24;
  --font-sans: 'Inter', sans-serif;
}