Agent Mermaid Artifact
Template-style Mermaid artifact with data-mermaidDelta streaming, diagram preview and source editor, SVG/PNG export, in-memory versions, and quick prompts — no database persistence.
View Full Pattern on Desktop
Problems Solved
- Stream Mermaid diagram JSON with custom UI data parts
- Template-style Artifact class without a full chat backend
Use Cases
- Onboarding and architecture explanations
- Demos without database wiring
AI SDK APIs
Tags
Requirements
- Node.js
- 24+
- Memory
- 256MB
- Other
- Vercel AI Gateway API key
Environment Variables
AI_GATEWAY_API_KEYGet key →
External Services
Ready to use?
View the full interactive pattern with live preview and copy the source code.
Open Live PreviewView Pattern on DesktopRelated Patterns
Canvas Draw Artifact
Excalidraw whiteboard artifact with data-whiteboardDelta streaming, uncontrolled canvas, SVG/PNG/.excalidraw export, scene templates (architecture, user flow, org chart), and in-memory versions — no database persistence.
Agent Sheet Artifact
Template-style sheet artifact with data-sheetDelta streaming, CSV grid editor, in-memory versions, and quick prompts — no database persistence.
Agent Slides Artifact
Template-style slide deck artifact with data-slidesDelta streaming, sortable slide list and preview, Markdown export, in-memory versions, and quick prompts — no database persistence.
Agent Text Artifact
Template-style text artifact with data-textDelta streaming, ProseMirror Markdown editor, in-memory versions, and quick prompts — no database persistence.