Diagram — Visual Rendering via Snip

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: