Skip to content
ajan.io

Docs menu

On this page

Mermaid Diagrams

Create Mermaid diagrams in ajan Chat and refine, interact with, and export them

Generating Mermaid Diagrams

Transform your ideas into clear diagrams using Mermaid in ajan. Whether you need flowcharts, process diagrams, or system architectures, our models create precise Mermaid code.

How Mermaid Generation Works

When you request a diagram, ajan's AI models analyze your requirements and generate Mermaid syntax. The process is conversational and iterative, allowing you to refine your diagram until it matches your vision.

Request your diagram

Describe the diagram you want to create. Be specific about the type (flowchart, sequence diagram, etc.) and include key elements you want to visualize. Create a flowchart showing the user authentication process

AI generates Mermaid code

The model creates Mermaid syntax based on your description. If your request is unclear, the model may ask follow-up questions to ensure accuracy.

Interactive diagram appears in Chat

A new frame opens displaying the rendered diagram once the Mermaid code is generated.

Interacting with Your Diagram

In Chat, the diagram frame provides several interaction options to help you examine and work with your visualization.

Top-left corner icons:

  • Zoom In : Magnify specific parts of your diagram for detailed examination
  • Zoom Out : Get a broader view of complex diagrams
  • Reset View : Return to the original zoom level and position

Navigate within the frame:

  • Click and drag: Move around large diagrams to examine different sections
  • Responsive interaction: The diagram responds immediately to your movements

Export and Sharing Options

The top-right corner of the frame contains three export options:

  • PNG Download — Download a PNG file of your diagram, perfect for presentations, documentation, or sharing with stakeholders.
  • Copy Mermaid Code — Copy the Mermaid syntax to your clipboard for use in other tools, documentation systems, or version control.
  • Download .mermaid File — Save the diagram as a .mermaid file for editing in specialized tools or integration with development workflows.

Refining Your Diagram

If your diagram doesn't match your vision exactly, you can easily request modifications through natural conversation.

  • Color changes: "Make the decision nodes blue and the process steps green"
  • Text adjustments: "Change 'User Login' to 'Authentication Process'"
  • Structure modifications: "Add a step for password validation before the success path"
  • Style updates: "Use rounded rectangles instead of sharp corners"
  • Layout improvements: "Arrange the nodes vertically instead of horizontally"

Describe your changes

Tell the model exactly what you want to modify. Be specific about colors, text, structure, or layout changes. Change the color of the error handling boxes to red and add a retry loop

Model regenerates diagram

The AI processes your feedback and creates updated Mermaid code incorporating your requested changes.

New frame displays updated diagram

In chat, a fresh diagram frame appears with your modifications, ready for further interaction or export.