Steph Huynh

● Hackathon project

Zero to Agent · San Diego

Mermaid in Figma.

I built this at Zero to Agent: San Diego, a Figma plugin for the workflow I kept wishing existed: write Mermaid in-panel, preview as you type, and drop the diagram onto the canvas without leaving the file. I could not stay for the full event and left before demos, so I never presented it to the room.

Event

Zero to Agent: San Diego

Date

May 2, 2026

Stack

Figma Plugin API, Mermaid, TypeScript

Role

Solo build

The idea

Diagramming often happens in Figma, but the syntax editing usually happens somewhere else. I wanted the write-and-preview step to live next to the canvas.

The plugin is a small editor: Mermaid in, live preview, one insert action.

Why it matters

Less tab-switching between a diagram editor, a preview, and the frame you are already in.

Hosts and sponsors

Zero to Agent: San Diego was the local stop of Vercel's global build week. These hosts and sponsors covered the venue, prizes, and the day itself.

Hosts

Vercel

Co-host

Hosted Zero to Agent, a global build week for shipping AI agents with v0 and Vercel.

Learn more

Hacker Fund

Co-host

Co-hosted the San Diego stop as the 501(c)(3) behind community hackathons.

Learn more

Local sponsors

Clinically AI

Venue sponsor

Opened their San Diego HQ for the hackathon. They help behavioral healthcare teams with documentation and compliance.

Learn more

Airmont

Local prizes

Funded the local prizes for first, second, and third place.

What I built

In the time I had at the event: a Mermaid text editor, a synced preview, and insert-to-canvas.

The workflow

Write, preview, insert. All inside Figma.

How it works

The plugin runs in Figma's sandbox with the UI in the plugin panel. Mermaid renders on each keystroke so preview and source stay aligned.

On insert, it calls the Figma API to place the rendered diagram in the open file.

Stack

Figma Plugin API, Mermaid 11, TypeScript, CodeMirror 6, esbuild. Monorepo also includes an optional Next.js playground for browser testing, separate from what ships in Figma.

Tech stack

Two runtimes in one repo: the plugin bundle Figma loads, and a web app for trying the same editor flow in the browser.

figma-mermaid-plugin/

Figma plugin

Runs in Figma: sandbox logic in code.ts, React UI in an iframe, esbuild bundles to dist/. This is what ships in the editor.

Layers

  • Platform · Figma Plugin API, manifest.json, @figma/plugin-typings
  • Main thread · TypeScript → src/code.ts (sandbox)
  • UI iframe · React 18, TypeScript → src/ui.tsx
  • Bundler · esbuild (IIFE → dist/code.js, dist/ui.js)
  • Editor · CodeMirror 6 (@codemirror/*)
  • Diagrams · Mermaid 11
  • Figma integration · svg-importer, node-tracker, parser, reverser (bidirectional sync)

Root (app/)

Web playground

Next.js Mermaid editor in the browser. Same diagram domain as the plugin, but a separate runtime. Not required to run the Figma plugin.

Layers

  • Framework · Next.js 16 (App Router, app/)
  • UI · React 19
  • Language · TypeScript
  • Styling · Tailwind CSS v4, PostCSS
  • Components · shadcn/ui (Radix, components/ui/)
  • Forms · react-hook-form, Zod, @hookform/resolvers
  • Editor · CodeMirror 6
  • Diagrams · Mermaid 11
  • UX / tooling · lucide-react, sonner, next-themes, @vercel/analytics, ESLint

Tutorial

I am writing a walkthrough on how to build a Figma plugin from scratch, using this project as the worked example. The goal is to show the full path from an empty manifest to something you can run in the editor, not just the Mermaid-specific pieces.

What it will cover

  • Scaffolding a plugin with the Figma desktop app and TypeScript
  • Splitting UI code from the sandbox main thread
  • Passing messages between the panel and plugin context
  • Rendering a preview and inserting the result onto the canvas

Tutorial in progress.

Outcome

I left before the demo block, so I did not show the plugin to judges or the room. What I had working in my own file was still useful: quick enough for rough sketches, native enough to keep using after the event.

Takeaways

  • Live preview next to source text changes how fast you trust the output.
  • Utility plugins win when they remove a tab, not add a panel.
  • Insert is the feature that makes Mermaid feel like part of Figma.

Future iterations

The hackathon build proved the core loop. These are the features I would reach for next.

Frontmatter

Support Mermaid frontmatter for titles, themes, and diagram-level config without hand-editing the raw block.

Bidirectional editing

Edit node text on the inserted diagram and have those changes sync back to the syntax in the editor.

Editor polish

Shortcuts, diagram starters, and smarter placement on busy canvases, plus enough polish to demo at another event.