01
Background
Why this exists
Diagram tooling is often either too heavy or too bare. Mermaid is maintainable, but editing still needs a smoother writing-first surface.
Diagram / EditorSelected
MermaidFlow
Free Online Mermaid Diagram Editor
An online Mermaid editor with syntax highlighting, live preview, and export support for text-first diagram workflows.
- Mermaid
- Diagram
- Editor
- Export
Open the product
Start with the live surface
Live preview
Some sites may block iframe embeds because of their security policy. If the frame stays blank, use the Open live link above.
Access
For this type of entry, the strongest content is the live product itself. The notes below are there to frame what matters, not to replace the real experience.
Visual history
Latest state first, previous interface states preserved underneath
This timeline keeps a readable visual memory of the surface, so the newest cover can stay on the project card without erasing what came before.
Latest
Latest
2026-04-04
Archived
Archived cover
2026-04-04
Legacy R2
Legacy above-the-fold capture
2026-01-22
Legacy R2
Legacy full-page capture
2026-01-22
Project notes
What to know before opening the live product
02
Scenario
Use scenarios
- Maintain diagrams directly inside README and specs.
- Iterate product and process flows without drag-and-drop overhead.
- Share diagrams as links or exports.
03
Delivery
What I shipped
- Real-time sync between editor and preview.
- Syntax highlighting tuned for writing speed.
- Export paths for docs and decks.
04
Design
Design decisions
- Keep input and output visible at a glance.
- Use a low-noise interface with immediate feedback.
- Remove setup barriers and make it usable on first open.
05
Tech
Implementation
- Componentized Mermaid rendering pipeline.
- Export-focused output chain for SVG and PNG delivery.
Flow
The path from entry to completion
This version is best understood as a living product: entry points, feedback loops, and completion states matter as much as the surface design.
Write / Preview / Export
Open project: LIFEOS Goal Tree 
LIFEOS Goal Tree
A structured life-planning system that uses goal trees, alignment views, and board interfaces with real-time parsing and editing.
Open project: Prompt Hub 
Prompt Hub
A practical prompt library for individuals and indie builders, built around reusable templates that reduce trial-and-error cost.
Open project: CLI Command Reference 
CLI Command Reference
A searchable syntax reference for Gemini CLI, Claude Code, and shell interaction, built for fast filtering and one-click copying.