afv-library/skills/generating-mermaid-diagrams/references/preview-guide.md
sandipkumar-yadav 37aa84df42
feat: @W-22444026@ Introducing Core Skills, Datacloud Skills, Industries and Utility Skills. (#268)
* Migrating Core Salesforce Skills

* Updating pr comments

* updat reference

* Updating a skill

* Migrating Datacloud skills

* Migrating Industries cloud skills

* Validating - skills fixing

---------

Co-authored-by: Sandip Kumar Yadav <sandipkumar.yadav+sfemu@salesforce.com>
2026-05-14 19:32:15 +05:30

1.4 KiB

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 ~/.claude/skills/generating-mermaid-diagrams/scripts/mermaid_preview.py start --file /tmp/mermaid-preview.mmd
    
    # Or from project folder (if working locally):
    python [project-root]/skills/generating-mermaid-diagrams/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 ~/.claude/skills/generating-mermaid-diagrams/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