Skip to main content
Ona Agent can generate Mermaid diagrams to visualize system architecture, dependencies, workflows, and data relationships. Ask in natural language:
Ona Agent generating a Mermaid diagram of a distributed system architecture with code and preview tabs
  • “Draw an architecture diagram showing how our microservices communicate”
  • “Create a sequence diagram for the authentication flow”
  • “Show me a dependency graph for the frontend components”
  • “Visualize the relationships between our database tables”

​
When Mermaid is useful

Mermaid diagrams are especially useful when you need the agent to compress a lot of code or process detail into something you can scan quickly. Common use cases:
  • architecture overviews for onboarding
  • sequence diagrams for request or authentication flows
  • dependency maps for refactors
  • entity diagrams for schema discussions
  • workflow diagrams for automations and CI/CD

​
Supported diagram types

  • Flowcharts - decision trees and process flows
  • Sequence diagrams - interaction between components over time
  • Class diagrams - object-oriented relationships
  • Entity-relationship diagrams - database schema visualization
  • State diagrams - state machines and transitions
  • Gantt charts - project timelines
See the Mermaid documentation for syntax reference.

​
Viewing diagrams

Diagrams render with Code and Preview tabs. The preview includes zoom controls (25% to 450%), fullscreen mode, and copy-to-clipboard. Use the Code tab when you want to review or tweak the Mermaid syntax, copy the diagram into another document, or ask the agent to fix a rendering problem.

​
Refining a diagram

The first diagram is often a draft. Good follow-up prompts include:
  • “Simplify this to the five most important components”
  • “Turn this into a sequence diagram”
  • “Group frontend, backend, and infrastructure separately”
  • “Remove low-level implementation detail and focus on data flow”

​
Troubleshooting

If you see “Diagram Error”, the Mermaid syntax is invalid. Ask the agent to fix it or check the code tab for syntax issues. If the diagram is technically correct but not useful, ask for fewer nodes, clearer grouping, or a different diagram type.