Pretty Fish: A better mermaid diagram editor (opens in new tab)

(pretty.fish)

186 pointspastelsky1mo ago30 comments

30 comments

https://d2lang.com/ is a nicer language than Mermaid with much nicer visual appearance. It would be great if it became more widely supported.

erajasekar25d ago

I reached the same conclusion after comparing diagram-as-code tools — D2 feels cleaner and more expressive than Mermaid.

I’ve been working on an AI diagramming tool built around D2: https://aidiagrammaker.com/ You describe a system in plain English, and it generates architecture diagrams, flowcharts, and sequence diagrams in D2.

Edits can be made either directly in the D2 code or via a context-aware editor.

wps25d ago

Has anyone here used https://pikchr.org/ from the creator of SQLite?

neuronexmachina25d ago

I agree that it's nicer and more powerful, but it's a little concerning it hasn't had any commits in the past 6 months: https://github.com/terrastruct/d2/commits/master/

16bitvoid25d ago

I think the founder/lead developer, Alexander Wang, works at OpenAI now.

Plus, according to this comment on an issue, folks in their discord say it's not being actively maintained.

https://github.com/terrastruct/d2/issues/2735#issuecomment-4...

vladsanchez25d ago

Never imagined Scale.ai CEO was D2Lang creator nor that he joined his room-mate at OpenAI (giggle).

Thanks for sharing

1 more reply

nine_k25d ago

Maybe it doesn't need constant fixing? Are there many issues in the tracker?

jauntywundrkind25d ago

How good is the LLM at creating d2? What if any skills/material can folks recommend? (Follow-up: D2-mcp has a cheat sheet, https://github.com/h0rv/d2-mcp/blob/main/d2/CHEATSHEET.md)

And, does GitHub support it? (Follow up: alas not! Sadness. Please add!)

elcritch20d ago

For me that's the deal breaker :/

lugao25d ago

Does it produce real svgs as opposed to foreign object html in svg mess that mermaid compilers produce?

troyvit24d ago

d2 produces real svgs but I've found them to have a hard time displaying in other svg editors. The d2 folks talk about that somewhere and they have some fixes for it.

spacecow25d ago

Oh, finally, something that supports actual hierarchical state diagrams (that isn't Graphviz, no offense)... Mermaid's "You cannot define transitions between internal states belonging to different composite states" [1] has driven me up a wall for years.

  parentA.childA -> parentB.childB: voop
  parentB.childB -> parentA: vorp

shouldn't be that hard!

[1] https://mermaid.ai/open-source/syntax/stateDiagram.html#comp...

1 more reply

pastelskyOP25d ago

Thanks for sharing! I haven’t looked into that before but looks neat.

growrow25d ago

What makes it nicer?

Myrmornis25d ago

Take a look at https://d2lang.com/examples/dagre/ and https://d2lang.com/tour/intro/

The language is richer and all diagram types are implemented consistently in the same language in a way that can be composed, as opposed to being a collection of unrelated DSLs.

The improved visual appearance is clear from inspecting example diagrams, I believe.

pastelskyOP25d ago

Author here - thanks for all the support (and bug reports)!

I built pretty.fish with the belief that Mermaid diagrams don’t have to look like they’re from the 80s and to avoid squinting at Mermaid diagrams that coding agents create in tiny windows.

Having them on canvas also makes it easier to keep a track of, and even visualize agent steps as and when they are are being taken (if you connect an MCP you get a pretty nice view of agent building its knowledge graph for eg for a problem).

Didn’t expect it to take off like this—there are still rough edges (pan/zoom, mobile), but I’m working on smoothing those out soon.

juancn25d ago

It's pretty but I don't know about better.

- How do you pan? Two finger sliding on the trackpad just zooms.

- Why does the diagram you're working on doesn't use all the remaining space? I picked one example and it's on a small-ish box with controls that don't seem to do anything and half of it is out the screen on the bottom

Ohh... the scroll metaphor... it's annoying. A bunch of tabs would have been better or even a one at a time with a tree somewhere.

There's too much fighting with layout where a plain interface would be better, something closer to https://mermaid.live/

laserbeam26d ago

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?

smusamashah25d ago

How is this one better? I thought this was going to be a visual editor where you click and edit on the diagram itself. I don't seem to be able to do that here.

Arubis25d ago

I will grant this: that's a brilliant name and domain.

pastelskyOP1mo ago

- Write Mermaid diagrams with a live preview. - Arrange multiple diagrams on an infinite canvas. - Group diagrams into multi-page projects. - Better themes

Flavius26d ago

Make no mistakes.

lo1tuma25d ago

I actually like Mermaid’s text-based approach a lot and wouldn’t want to replace it with a visual editor.

Where I do see room for improvement is the rendering quality. A lot of diagrams end up looking a bit rough, especially with arrow routing and layout, which can feel somewhat arbitrary.

Better layout/rendering would probably add more value (for me at least) than improving the editing experience.

jggonz25d ago

Interesting timing and similarity with something I built last month! :)

I built https://fishygram.com with a DSL you can copy and paste into ChatGPT to build diagrams for you.

You can take a look at the examples to see what it can do.

totetsu25d ago

I'm always frustrated by how bad LLMs seem to be at making mermaid text without parsing errors all through it.

Lord_Zero25d ago

How does the agent session thing work? Server-side you proxy requests to client via websockets or something? How does the agent see the client-side data?

rdos26d ago

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.

jsmith4525d ago

Yeah, as far as I know, you need to define a customized theme to customize pie chart colors. You can prepend the chart with initialization logic like:

%%{init: {"theme": "base", "themeVariables": { "pie1": "#FF5733", "pie2": "#33FF57", "pie3": "#3357FF", "pieStrokeColor": "#000000", "pieStrokeWidth": 3, "pieOpacity": 0.8 }}}%%

This looks like it works on this site too.

pjot25d ago

To be fair, pie charts are horrible in general.

j / k navigate · click thread line to collapse

30 comments

Myrmornis25d ago

https://d2lang.com/ is a nicer language than Mermaid with much nicer visual appearance. It would be great if it became more widely supported.

erajasekar25d ago

I reached the same conclusion after comparing diagram-as-code tools — D2 feels cleaner and more expressive than Mermaid.

Edits can be made either directly in the D2 code or via a context-aware editor.

wps25d ago

Has anyone here used https://pikchr.org/ from the creator of SQLite?

neuronexmachina25d ago

I agree that it's nicer and more powerful, but it's a little concerning it hasn't had any commits in the past 6 months: https://github.com/terrastruct/d2/commits/master/

16bitvoid25d ago

I think the founder/lead developer, Alexander Wang, works at OpenAI now.

Plus, according to this comment on an issue, folks in their discord say it's not being actively maintained.

https://github.com/terrastruct/d2/issues/2735#issuecomment-4...

vladsanchez25d ago

Never imagined Scale.ai CEO was D2Lang creator nor that he joined his room-mate at OpenAI (giggle).

Thanks for sharing

1 more reply

nine_k25d ago

Maybe it doesn't need constant fixing? Are there many issues in the tracker?

jauntywundrkind25d ago

How good is the LLM at creating d2? What if any skills/material can folks recommend? (Follow-up: D2-mcp has a cheat sheet, https://github.com/h0rv/d2-mcp/blob/main/d2/CHEATSHEET.md)

And, does GitHub support it? (Follow up: alas not! Sadness. Please add!)

elcritch20d ago

For me that's the deal breaker :/

lugao25d ago

Does it produce real svgs as opposed to foreign object html in svg mess that mermaid compilers produce?

troyvit24d ago

d2 produces real svgs but I've found them to have a hard time displaying in other svg editors. The d2 folks talk about that somewhere and they have some fixes for it.

spacecow25d ago

  parentA.childA -> parentB.childB: voop
  parentB.childB -> parentA: vorp

shouldn't be that hard!

[1] https://mermaid.ai/open-source/syntax/stateDiagram.html#comp...

1 more reply

pastelskyOP25d ago

Thanks for sharing! I haven’t looked into that before but looks neat.

growrow25d ago

What makes it nicer?

Myrmornis25d ago

Take a look at https://d2lang.com/examples/dagre/ and https://d2lang.com/tour/intro/

The language is richer and all diagram types are implemented consistently in the same language in a way that can be composed, as opposed to being a collection of unrelated DSLs.

The improved visual appearance is clear from inspecting example diagrams, I believe.

pastelskyOP25d ago

Author here - thanks for all the support (and bug reports)!

I built pretty.fish with the belief that Mermaid diagrams don’t have to look like they’re from the 80s and to avoid squinting at Mermaid diagrams that coding agents create in tiny windows.

Didn’t expect it to take off like this—there are still rough edges (pan/zoom, mobile), but I’m working on smoothing those out soon.

juancn25d ago

It's pretty but I don't know about better.

- How do you pan? Two finger sliding on the trackpad just zooms.

Ohh... the scroll metaphor... it's annoying. A bunch of tabs would have been better or even a one at a time with a tree somewhere.

There's too much fighting with layout where a plain interface would be better, something closer to https://mermaid.live/

laserbeam26d ago

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?

smusamashah25d ago

How is this one better? I thought this was going to be a visual editor where you click and edit on the diagram itself. I don't seem to be able to do that here.

Arubis25d ago

I will grant this: that's a brilliant name and domain.

pastelskyOP1mo ago

- Write Mermaid diagrams with a live preview. - Arrange multiple diagrams on an infinite canvas. - Group diagrams into multi-page projects. - Better themes

Flavius26d ago

Make no mistakes.

lo1tuma25d ago

I actually like Mermaid’s text-based approach a lot and wouldn’t want to replace it with a visual editor.

Where I do see room for improvement is the rendering quality. A lot of diagrams end up looking a bit rough, especially with arrow routing and layout, which can feel somewhat arbitrary.

Better layout/rendering would probably add more value (for me at least) than improving the editing experience.

jggonz25d ago

Interesting timing and similarity with something I built last month! :)

I built https://fishygram.com with a DSL you can copy and paste into ChatGPT to build diagrams for you.

You can take a look at the examples to see what it can do.

totetsu25d ago

I'm always frustrated by how bad LLMs seem to be at making mermaid text without parsing errors all through it.

Lord_Zero25d ago

How does the agent session thing work? Server-side you proxy requests to client via websockets or something? How does the agent see the client-side data?

rdos26d ago

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.

jsmith4525d ago

Yeah, as far as I know, you need to define a customized theme to customize pie chart colors. You can prepend the chart with initialization logic like:

%%{init: {"theme": "base", "themeVariables": { "pie1": "#FF5733", "pie2": "#33FF57", "pie3": "#3357FF", "pieStrokeColor": "#000000", "pieStrokeWidth": 3, "pieOpacity": 0.8 }}}%%

This looks like it works on this site too.

pjot25d ago

To be fair, pie charts are horrible in general.

j / k navigate · click thread line to collapse