We use cookies to enhance your experience and measure how the site performs. Choose "Essential Only" to disable analytics. Read our Privacy Policy.

    Odeus Docs

    Mermaid Diagrams

    Create interactive flowcharts, process diagrams, and visualizations with AI-generated Mermaid code in Odeus

    Mermaid Diagrams

    Create interactive flowcharts, process diagrams, and visualizations with AI-generated Mermaid code in Odeus

    Generating Mermaid Diagrams

    Transform your ideas into clear, interactive diagrams using Odeus's AI-powered Mermaid generation. Whether you need flowcharts, process diagrams, or system architectures, our models create precise Mermaid code that renders instantly in an interactive frame.

    Mermaid diagram rendering is a built-in capability that's always available - you don't need to enable any special tool. Simply ask for a diagram and the model will generate Mermaid syntax that automatically renders in an interactive frame.

    How Mermaid Generation Works

    When you request a diagram, Odeus's AI models analyze your requirements and generate Mermaid syntax that renders immediately in your chat. The process is conversational and iterative, allowing you to refine your diagram until it perfectly matches your vision.

    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
    
    > The more specific your request, the better the initial result. Include details like decision points, process steps, and relationships between elements.
    
    
    
    The model creates Mermaid syntax based on your description. If your request is unclear, the model may ask follow-up questions to ensure accuracy.
    
    > Different models may interpret your request slightly differently, so feel free to try various models if the first result doesn't match your expectations.
    
    
    
    Once the Mermaid code is generated, a new frame opens in your chat displaying the rendered diagram with full interactivity.
    
    > You'll see your diagram rendered immediately with zoom controls and navigation options available.
    

    Interacting with Your Diagram

    The diagram frame provides several interaction options to help you examine and work with your visualization.

    Navigation Controls

    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

    Use zoom controls when working with large, complex diagrams to focus on specific sections without losing context.

    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 raw 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"

      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

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

      A fresh diagram frame appears with your modifications, ready for further interaction or export.

      The updated diagram maintains all previous elements while incorporating your specific changes.

    Complex diagrams with many elements may take a moment to render. The interactive frame will appear once the diagram is fully processed.