Pretty Fish: A better mermaid diagram editor

▲ Pretty Fish: A better mermaid diagram editor(pretty.fish)

104 points by pastelsky 6 days ago | 21 comments

▲ Myrmornis 4 hours ago | parent | next [-]

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

▲ wps 31 minutes ago | parent | next [-]

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

▲ erajasekar 3 hours ago | parent | prev | next [-]

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.

▲ neuronexmachina 3 hours ago | parent | prev | next [-]

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/

	▲	16bitvoid 42 minutes ago \| parent \| next [-]
		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...
	▲	nine_k an hour ago \| parent \| prev [-]
		Maybe it doesn't need constant fixing? Are there many issues in the tracker?

▲ lugao 4 hours ago | parent | prev | next [-]

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

▲ spacecow 2 hours ago | parent | prev | next [-]

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...

▲ growrow 4 hours ago | parent | prev | next [-]

What makes it nicer?

	▲	Myrmornis 3 hours ago \| parent [-]
		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.

▲ jauntywundrkind 2 hours ago | parent | prev [-]

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!)

▲ juancn 2 hours ago | parent | prev | next [-]

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/

▲ smusamashah 2 hours ago | parent | prev | next [-]

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.

▲ Arubis 4 hours ago | parent | prev | next [-]

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

▲ laserbeam 4 hours ago | parent | prev | next [-]

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?

▲ Lord_Zero 3 hours ago | parent | prev | next [-]

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?

▲ pastelsky 6 days ago | parent | prev | next [-]

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

	▲	Flavius 4 hours ago \| parent [-]
		Make no mistakes.

▲ rdos 5 hours ago | parent | prev [-]

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.

	▲	jsmith45 4 hours ago \| parent \| next [-]
		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.
	▲	pjot 4 hours ago \| parent \| prev [-]
		To be fair, pie charts are horrible in general.