# Export & Rendering Guide

Quick reference for getting these diagrams into Marco's Q2 launch review slides.

## Quick Render: Mermaid Live Editor

1. Open **https://mermaid.live**
2. Paste any `.mmd` file contents into the editor pane
3. The diagram renders instantly in the preview pane
4. Use the **Actions** menu to export

## Export Formats

| Format | Best For | How |
|--------|----------|-----|
| **SVG** | Slides, docs — scales perfectly at any zoom | Actions > Export SVG |
| **PNG** | Slide decks, email — set width to 1920px+ for 2x | Actions > Export PNG (set width) |
| **Clipboard** | Quick paste into Notion, Confluence | Actions > Copy to clipboard |
| **Link** | Sharing for review before the meeting | Actions > Copy link (shareable URL) |

**Recommendation for slides:** Export as SVG for best quality. If your slide tool doesn't support SVG, use PNG at 1920px width minimum for crisp rendering on projectors.

## CLI Rendering (Batch Export)

If you need to render all four diagrams at once:

```bash
# Install mermaid-cli (one-time)
npm install -g @mermaid-js/mermaid-cli

# Render individual diagrams
npx mmdc -i diagrams/01-funnel-basic.mmd -o exports/01-funnel-basic.svg
npx mmdc -i diagrams/02-funnel-styled.mmd -o exports/02-funnel-styled.svg
npx mmdc -i diagrams/03-api-sequence-basic.mmd -o exports/03-api-sequence-basic.svg
npx mmdc -i diagrams/04-api-sequence-styled.mmd -o exports/04-api-sequence-styled.svg

# PNG at 2x resolution for slides
npx mmdc -i diagrams/02-funnel-styled.mmd -o exports/02-funnel-styled.png -w 1920
npx mmdc -i diagrams/04-api-sequence-styled.mmd -o exports/04-api-sequence-styled.png -w 1920
```

## Background Tips

- **White background** for printed handouts or light-themed slides
- **Transparent background** for dark-themed slide decks (SVG default is transparent)
- The styled diagrams (02, 04) use the indigo/violet palette from the playbook — they'll look best on white or light gray slide backgrounds

## Files in This Directory

| File | Description |
|------|-------------|
| `01-funnel-basic.mmd` | Funnel flowchart — clean, no styling |
| `02-funnel-styled.mmd` | Funnel flowchart — color-coded, subgraphed, legend |
| `03-api-sequence-basic.mmd` | API sequence — clean, no styling |
| `04-api-sequence-styled.mmd` | API sequence — phased, activation bars, error handling |

## Which Version to Use?

- **For the exec presentation:** Use the styled versions (02, 04) — they have color coding, phase grouping, and a legend that reads well at a glance.
- **For the engineering handoff doc:** Use the basic versions (01, 03) — cleaner for embedding in technical docs or wikis.
- **For both:** The basic versions render reliably everywhere; the styled versions need Mermaid 10+ for full theme support.