Formats

Pattern

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.

IntermediateApr 2026View the full pattern on desktop
Agent Mermaid Artifact preview

Problems solved

  • Stream Mermaid diagram JSON with data-mermaidDelta UI parts
  • Edit diagram source alongside a live Mermaid preview
  • Export diagrams as SVG or PNG
  • Keep diagram versions in memory without database persistence

Use cases

  • Architecture explanation copilots
  • Onboarding flow diagrams from chat
  • Sequence and flowchart artifacts
  • In-browser Mermaid editors for agents

AI SDK APIs

streamTextcreateUIMessageStreamgatewaytool

Tags

aimermaiddiagramarchitecturestreamingai-sdkartifacts

Requirements

Node.js
24+
Memory
256MB
Other
  • Vercel AI Gateway API key

Environment variables

External services

openaiupstash

Ready to use?

View the full interactive pattern with live preview and copy the source code.

View the pattern on desktop

Related patterns

Canvas Draw ArtifactExcalidraw 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.Apr 2026
Agent Sheet ArtifactTemplate-style sheet artifact with data-sheetDelta streaming, CSV grid editor, in-memory versions, and quick prompts — no database persistence.Apr 2026
Agent Slides ArtifactTemplate-style slide deck artifact with data-slidesDelta streaming, sortable slide list and preview, Markdown export, in-memory versions, and quick prompts — no database persistence.Apr 2026
Agent Text ArtifactTemplate-style text artifact with data-textDelta streaming via @aisdkagents/react DataStreamController + ArtifactSession, ProseMirror Markdown editor, in-memory versions, and quick prompts — no database persistence.Apr 2026