Improve diagramming

Ideas Feedback
,
1

This is how mermaid diagrams looks in Light and dark themes.

There are some problems with it

  1. Lines/Arrows are barely visible
  2. Spacing is not compact
  3. Text labels are too small

It’s very hard to consume the diagram.

Diagrams are esp useful in Plan mode where the whole plan can be understood much faster using diagrams.

Thicker arrows and bigger text labels will help solve some of the problems. Or an option to choose the diagramming lib or auto switch to best one based on the type of the diagram?

image
image2604×1522 170 KB

image
image2448×1434 157 KB

4

Hey, thanks for the detailed feedback and the screenshots in both threads. Thin arrows, small labels, and an inefficient layout are known pain points with Mermaid rendering, especially in Plan mode where the diagram is often the whole point of the message. We recently shipped a fix for color contrast. The other items spacing, text size, and zoom behavior are on our radar, but I can’t share an ETA.

A couple things that can help right now:

  • Clicking the diagram opens it in an expanded view with zoom and pan, which is much easier to read than the inline view.
  • If you’re generating the diagram via Plan mode, it can help to explicitly ask the agent to simplify the structure. Fewer top-level nodes and using subgraphs instead of a flat graph usually makes Mermaid more compact.

The idea of picking a different library or auto switching based on diagram type is interesting. If you run into specific cases where the render is basically unreadable like in your screenshots, please send them over. It really helps us prioritize.