Design and diagrams decision
Mermaid Chart
Mermaid Chart's solo core is compact: build a browser-based diagram-as-code editor with drag, resize, connect, keyboard shortcuts, autosave, and SVG or PNG export. A competent builder can reach a useful personal version in one sitting, while the paid product mainly wins on interaction polish, collaboration.
Visit website↗Open-source builds that already do this
Every project below is open source and already does this job today. Fork one, self-host it, or take the parts you need — the build prompt further down assumes an empty file, and this is the shortcut past that. Licences differ; check the one on each card before you ship.
What a replacement has to do
- Build a browser-based diagram-as-code editor with drag, resize, connect, keyboard shortcuts, autosave, and SVG or PNG export.
What it still won’t have
- high-fidelity import and export
- presentation and enterprise controls
- multiplayer cursors and comments
- large template libraries
What remains hard
- Execution quality
- Team collaboration
First-year cost
The build hours below are a category default, not an estimate for this product. Change them to your own numbers and the comparison follows.
No published price
Mermaid Chart does not publish a price we could read, so there is nothing to compare against. What building costs is below.
Money you would actually spend
Time you would spend
—
What you would spend
What we assumed
The verdict above measures whether you could build it. This one is only about money.
Runnable build prompt
Build a usable personal replacement for the core loop of Mermaid Chart. Use exactly this stack: React + TypeScript + Vite + IndexedDB. Primary job: Build a browser-based diagram-as-code editor with drag, resize, connect, keyboard shortcuts, autosave, and SVG or PNG export. Start from an empty folder and create the complete working project. Make the default mode single-user and private. Store user data locally unless the core job requires the declared self-hosted database. Do not add analytics, telemetry, ads, or third-party accounts. Put every secret and external credential in .env and provide .env.example. Use realistic sample data that is clearly labelled and easy to delete. Implement the smallest polished interface that completes the core loop end to end. Include clear empty, loading, validation, success, and failure states. Add import and export so the user is not trapped in the app. Use accessible keyboard navigation, labels, focus states, and sensible contrast. Validate untrusted input and never log secrets or private file contents. Deliberately exclude these paid-product advantages: high-fidelity import and export; presentation and enterprise controls; multiplayer cursors and comments. Do not fake integrations, network effects, proprietary data, model quality, compliance, or security claims. Where an external API is optional, keep the app useful without it and explain the degraded mode. Write focused unit tests for the data model and the most important workflow. Add one end-to-end smoke test that proves the core loop works. Create a README with setup, permissions, architecture, data location, backup, and limitations. Add scripts for install, development, test, build, and a production-style local run. Run the tests and build before finishing, then fix errors rather than merely describing them.
