IdeaWell

Project ideas from Hacker News discussions.

Pretty Fish: A better mermaid diagram editor

Original Article

Hacker News Discussion

📝 Discussion Summary (Click to expand)

The 3 MostPrevalent Themes

Theme Summary with Supporting Quote
Customization & Theme Limitations Users note that Mermaid only lets you tweak predefined themes, making it hard to get satisfactory chart styling: “I can't seem to change the colors of the pie chart, other than the predefined themes. But all of those are horrible for a pie chart.” — rdos
Usability & Feature Gaps Several commenters criticize Mermaid’s practical shortcomings, such as resize‑handle behavior and limited state‑diagram syntax: “The first thing I tried to do is resize that rectangle in the default diagram… and the resize handles do not affect the height, only the width. What is this “better” than?” — laserbeam
Interest in D2 as a Superior Alternative The consensus leans toward D2 being cleaner, more expressive, and visually superior, with richer composition capabilities: “The language is richer and all diagram types are implemented consistently… the improved visual appearance is clear.” — Myrmornis

🚀 Project Ideas

MermaidCanvas Studio#Summary

  • Live preview of Mermaid diagrams on an infinite, multi‑page canvas with drag‑and‑drop layout and instant theme testing.
  • Theme editor that instantly visualizes custom color overrides (e.g., pie chart colors) without manual init code.

Details

Key Value
Target Audience Diagram designers, engineers, product managers
Core Feature Infinite canvas editor with live preview, multi‑page projects, and theme configurator
Tech Stack React + TypeScript + D3 for canvas, mermaid-cli for rendering, Firebase for storage
Difficulty Medium
Monetization Revenue-ready: Subscription $9/mo

Notes

  • HN commenters explicitly want live preview and better theming, citing pastelesky and jsmith45 frustrations.
  • Potential for discussion and practical utility for architecture and flow diagrams.

D2 Sketchpad

Summary

  • Code‑first diagramming platform that generates D2 diagrams from plain English and lets users edit visual output instantly.
  • Includes built‑in support for hierarchical state machines and produces clean SVGs.

Details

Key Value
Target Audience Architects, SREs, developers who need clean architecture diagrams
Core Feature Plain‑English to D2 generator plus visual editor, hierarchical state diagram support
Tech Stack Next.js front‑end, Node.js API, D2 engine (self‑hosted), Vercel serverless
Difficulty Medium
Monetization Revenue-ready: Tiered pricing based on diagram count

Notes- Myrmornis and erajasekar praise D2’s expressiveness; community wants active maintenance and broader adoption.

  • Potential to spark discussion on replacing Mermaid with a richer DSL for diagramming.

PieChart Theme Designer

Summary

  • Browser extension that visualizes and edits Mermaid themeVariables for pie charts with live preview.
  • Generates ready‑to‑copy theme code blocks, eliminating manual init snippets.

Details

Key Value
Target Audience Mermaid users who need colored pie charts
Core Feature Interactive theme editor with preview of colors, exportable CSS
Tech Stack Chrome/Firefox extension built with TypeScript, leverages mermaid‑cli for rendering
Difficulty Low
Monetization Hobby

Notes

  • jsmith45 demonstrated the need for custom init to change colors; rufo and others complained about horrible themes.
  • Potential to stimulate discussion and provide immediate utility in existing Mermaid workflows.

Read Later