Skip to main content
Ona Agent can generate Mermaid diagrams to help you visualize system architecture, dependencies, workflows, and data relationships. Instead of manually creating diagrams, simply ask Ona Agent to draw them for you.

​
Viewing diagrams

When Ona Agent generates a Mermaid diagram in conversation, you’ll see a code block with Code and Preview tabs:
  • Code tab: Shows the Mermaid syntax that defines the diagram
  • Preview tab: Renders the diagram visually with zoom controls

​
Preview controls

The preview includes interactive controls:
  • Zoom in/out: Adjust diagram size from 25% to 450%
  • Reset view: Return to 100% zoom
  • Fullscreen: Expand the diagram to fill your screen
  • Copy code: Copy the Mermaid syntax to use elsewhere

​
Requesting diagrams

Ask Ona Agent to create diagrams using natural language. Here are effective prompts:
  • Draw an architecture diagram showing how our microservices communicate
  • Create a system architecture diagram for the authentication flow
  • Show me a dependency graph for the frontend components
  • Visualize the relationships between our database tables
  • Draw a flowchart for the user onboarding process
  • Create a sequence diagram showing the API request lifecycle
  • Generate an ER diagram for our user and order models
  • Show the database schema relationships as a diagram

​
Diagram types

Ona Agent can generate various diagram types using Mermaid:
  • 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
  • Git graphs: Branch and merge visualization
For complete Mermaid syntax reference, see the official Mermaid documentation.

​
Troubleshooting

​
Diagram shows an error

If you see “Diagram Error” in the preview:
  • The Mermaid syntax may be invalid
  • Click Show Code to review the syntax
  • Ask Ona Agent to fix the diagram: 
    The diagram has a syntax error, can you fix it?

​
Diagram is too small or large

Use the zoom controls in the preview:
  • Click Zoom in (+) or Zoom out (-)
  • Click Reset view to return to 100%
  • Use Fullscreen for detailed diagrams

​
Can’t see the full diagram

  • Use the Fullscreen button for better visibility
  • Scroll within the preview area
  • Ask Ona Agent to simplify the diagram: 
    Break this into two separate diagrams

​
Next steps

⌘I