afv-library/skills/external-diagram-mermaid-generate/references/preview-guide.md

Mermaid Preview Server Guide

After generating the diagram, offer the user a localhost preview for real-time iteration.

Start Preview

1. Save Mermaid code to temporary file:

   Write: /tmp/mermaid-preview.mmd
   [Mermaid code content]
   

2. Start preview server (runs in background):

   # From installed skill folder:
   python ../scripts/mermaid_preview.py start --file /tmp/mermaid-preview.mmd
   

3. Provide URL to user:

   Preview available: http://localhost:8765

   The browser will auto-reload when you update the diagram.

Iteration Workflow

• User views diagram in browser
• User requests changes ("make boxes pink", "add another node")
• You update /tmp/mermaid-preview.mmd using the Write tool
• Browser auto-reloads with new diagram (via SSE)
• Repeat until user is satisfied

Stop Preview

When user is done:

python ../scripts/mermaid_preview.py stop

Preview Server Features

• Live reload via Server-Sent Events (SSE)
• Dark/light theme auto-detection
• Copy Mermaid code button
• Download as SVG button
• Connection status indicator