Steph Huynh● Hackathon project
Built at Zero to Agent: San Diego
Mermaid Diagram Editor.
A Figma plugin that opens an editor inside Figma, lets you type Mermaid syntax, renders the diagram live, and inserts the result directly into the current file. I built it during Zero to Agent: San Diego because it was the kind of tool I wished already existed.
Event
Zero to Agent: San Diego
Date
May 2, 2026
Stack
Figma Plugin API, Mermaid, TypeScript
Role
Solo builder
The idea
I wanted to keep diagramming close to the work already happening in Figma. Instead of switching to a separate editor, rewriting the diagram elsewhere, and then pasting it back, the plugin keeps the whole flow in one place.
The result is a compact editor for Mermaid syntax with live rendering and a single action to insert the finished diagram into the file.
Why it matters
It removes the context switch between writing the diagram, previewing it, and placing it into the design you are already editing.
Gallery
The editor surface, Mermaid preview, and the insertion workflow inside Figma.
What I built
A Figma plugin with a text editor for Mermaid syntax, a live preview pane, and an insert action that places the rendered diagram onto the canvas.
The workflow
Type Mermaid, preview the rendered diagram, then insert it into the file without leaving Figma.
How it works
The plugin runs inside Figma's sandbox, hosts the editor UI in the plugin panel, and renders Mermaid syntax as you type so the preview stays in sync with the source text.
When the diagram is ready, the plugin uses the Figma API to place the rendered result into the current file.
Stack
Figma Plugin API, Mermaid, TypeScript
Outcome
It became the kind of tool I had been missing: fast enough for rough drafts, but still native to the Figma workflow when it was time to share or refine the diagram.
If I revisited it, I would add more editor conveniences, better diagram presets, and a few more affordances for inserting diagrams in different canvas contexts.
Takeaways
- Keeping the editor and preview in one place lowers friction.
- The best utility plugins remove a context switch, not add one.
- A simple insert action can make a text tool feel native to Figma.