● Case study
2023–2026
Founding UX Engineer — Mermaid Chart.
First and only UX Engineer at Mermaid Chart, now Mermaid.ai — the official commercial platform for Mermaid.js , the open-source diagramming library. The role covered the full product surface: designing the dashboard, editor, and core features, while also building the UI foundation from the ground up — design system, Storybook, documentation site, and community.
Live artifacts
- Docs → Mermaid Chart documentation
- Discord → Community server
- GitHub → Mermaid.js organization
- Mermaid.js → Open-source diagramming library
Public artifacts only — product screens are under NDA.
Scope
Product design, design system, Storybook, docs, community
Stack
SvelteKit, TypeScript, Supabase, Storybook, Argos
Role
Founding UX Engineer
Outcome
23 components, full docs site, company-wide adoption
Context
Mermaid Chart is the commercial platform built on top of Mermaid.js — a well-known open-source diagramming library used across the developer community. I joined as the fourth person on the team and the first UX Engineer, with no existing UI foundation, design system, or documentation.
Early on, the role spanned product design and direction — designing the dashboard, the editor, and the features inside it, while also shaping what got built alongside how. Over time the focus shifted toward engineering delivery, but the product design work informed every system decision that followed.
Why this mattered
A platform for developers needs to earn trust with a technical audience. The UI foundation, documentation, and community all had to reflect that — not just look good, but work the way developers expect things to work.
What I built
The work spanned the full surface of Mermaid Chart — from the component library to the docs site to the community layer underneath it.
Component library
23 production-ready components for a complete website redesign. Owned the full design system roadmap from foundation to delivery.
Storybook
Demo pages for every component, giving the engineering team a living reference for implementation and reducing handoff friction.
Documentation site
Built from scratch — product tutorials and reference pages for each diagram type, making Mermaid Chart more approachable for new users.
Community and open source
Set up and launched the community Discord. Contributed documentation to Mermaid.js itself — the open-source project Mermaid Chart was built on.
Key decisions
The most important calls weren't technical. They were about scope, sequencing, and what it actually means to own a UI foundation on a small, early-stage team.
Shape what gets built, not just how it looks
In the early stages, the role meant being involved in product and design decisions alongside engineering — figuring out what to build before figuring out how to build it well.
Treat Storybook as a team artifact, not a personal tool
Demo pages for every component turned Storybook into a shared reference the engineering team could rely on. The goal was reducing the gap between design intent and implementation.
Documentation as product, not afterthought
The docs site was built with the same care as the product itself — structured around how users learn, not just what engineers needed to ship.
Invest in the surrounding ecosystem
Community and open-source contributions were part of the job. Launching the Discord and contributing to Mermaid.js meant the work extended beyond the platform itself.
Outcome
Delivered 23 production-ready components for a complete website redesign. The engineering team had a living reference in Storybook for every component. The documentation site went from nothing to a structured resource covering product tutorials and every diagram type.
Led two company-wide developer sessions on design systems patterns and best practices — turning the system work into shared knowledge, not just shared artifacts.
Open source
Contributed documentation to the Mermaid.js open-source project — extending the work beyond Mermaid Chart itself and into the ecosystem it was built on.
See it in action
6,903 views · Dec 14, 2023
As a founding member, Steph didn't just help build the product — she shaped the foundation of the team and the culture around it. She brings strong design and product instincts, and a rare ability to turn ideas into polished, practical outcomes.
Steph has a knack for creating great user experiences! Not only has she designed (and re-designed!) entire sites and user-flows, but she built up a culture of strong UX design with reusable components and internal processes.