Diagram — Visual Rendering via Snip

<!-- snip-rules-v9 -->

Generate a visual diagram or HTML preview from the current conversation context and render it with Snip.

Step 1: Analyze context and choose format

Review the conversation to determine what to visualize.

Choose Mermaid for: architecture diagrams, sequence diagrams, flowcharts, ER diagrams, class diagrams, state diagrams, Gantt charts, git graphs, mind maps, timelines, or any structural/relational/flow visualization.

Choose HTML for: UI mockups, component previews, landing pages, dashboards, styled cards, data tables, or anything where visual design (colors, typography, layout) is the point.

Step 2: Pick the right Mermaid diagram type

When using Mermaid, select the most appropriate type:

Step 3: Write to a file

Use the Write tool to create the file — not Bash. Write to ~/.snip/tmp/ — not the project directory.

For Mermaid diagrams:

• Write to a .mmd file: ~/.snip/tmp/architecture.mmd, ~/.snip/tmp/auth-flow.mmd

For HTML previews:

• Write to a .html file: ~/.snip/tmp/preview.html, ~/.snip/tmp/dashboard-mockup.html

Step 4: Render with Snip

Then use Bash to render:

# Mermaid
snip render --format mermaid < ~/.snip/tmp/architecture.mmd

# HTML
snip render --format html < ~/.snip/tmp/preview.html

Step 5: Handle the response

The render command returns JSON: {"status": "approved", "edited": false, "path": "/path/to/rendered.png"}

• If status is "approved" and edited is false — the user accepted the diagram. Done.
• If edited is true — the user annotated the image with corrections. Use the Read tool to view the image at path, then update the source file and re-render.
• If status is "changes_requested" — read the text field for written feedback. Update the source file and re-render.

Tips

• For large diagrams, use subgraphs to organize related nodes
• Keep node labels concise; use notes for details
• For HTML, use inline <style> tags (external stylesheets won't load)
• HTML is sandboxed: no <script> or <canvas> JS will execute
• For fixed-size HTML designs, set explicit body dimensions: body { width: 800px; height: 600px; }