Mermaid diagrams are even better because you don't waste characters on the visual representation but rather the relationships between them. It's the difference between
graph TD
User -->|Enters Credentials| Frontend[React App]
Frontend -->|POST /auth| API[NodeJS Service]
API -->|Query| DB[(PostgreSQL)]
API --x|Invalid| Frontend
DB -->|User Object| API
API -->|JWT| Frontend
Mermaid diagrams automatically render on Markdown and IDE chat windows as in VSCode or Cursor. So you get the best of both worlds, a graph you can look at a ND manipulate with the mouse but also in a format LLMs can read.
LLMs nowadays can understand png diagrams too.
But not all CLIs handle pngs as easily as a text diagram. Syncing images is also multiple times slower.
png diagrams should never be the default.
They can’t update it though. In docs it makes sense to use that as a basis and have the Llm update it when needed
Mermaid diagrams are even better because you don't waste characters on the visual representation but rather the relationships between them. It's the difference between
and Plus while an LLM can understand relationships via pure ASCII or an image, it's just easier to give it the relationship data directly.But the point is to have something easy to read both for humans and LLM, no?
It’s harder to read mermaid in a terminal or a markdown file…
Mermaid diagrams automatically render on Markdown and IDE chat windows as in VSCode or Cursor. So you get the best of both worlds, a graph you can look at a ND manipulate with the mouse but also in a format LLMs can read.
more tokens, less reliable, dont work in all CLI agent harnesses