# Mermaid

Tidewave Web can render Mermaid diagrams, all you need to do is ask your coding agent to generate one!

<iframe width="640" height="360" src="https://www.youtube.com/embed/59rMrGLuG1s?si=2JUxE1wJEZSxw487" title="Mermaid in Tidewave" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

You can use Mermaid in Tidewave for:

* Visualizing existing code: Tidewave could analyze existing code and generate diagrams to help developers understand relationship between modules, files, etc

* Documentation generation: after implementing a feature, Tidewave can generate sequence diagrams showing the request/response flow, architecture diagrams, state transitions, and others

* Database work: given Tidewave's ability to execute SQL queries, it can generate ER diagrams, relationship diagrams showing foreign keys and query execution plans as flowcharts

* Debugging and analysis: you can ask Tidewave what happens when it executes an action (such as clicking a button or filling in some form), and it will cross-reference client side actions with source code and logs

Check out this 3-minute demo for a more extensive example of using Tidewave to generate Mermaid diagrams for debugging and analysis.

<iframe width="640" height="360" src="https://www.youtube.com/embed/Yq38GVs7kks?si=qIy3y0fZGEvKTiby" title="Mermaid in Tidewave with explanation" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>