Skip to main content

🌊 Mermaid Rendering

FlowChat supports rendering of professional Mermaid diagrams, flowcharts, and other visualizations directly within the chat interface.

Overview​

Mermaid is a powerful tool for visualizing complex information. When paired with FlowChat's AI models, it allows you to generate and iterate on diagrams through simple conversation.

Using Mermaid in FlowChat​

To generate a diagram, simply ask the AI to create one using Mermaid syntax. For example:

  • "Create a flowchart for a simple decision-making process using Mermaid."
  • "Visualize a decision tree to determine project priority using Mermaid."

For the diagram to render correctly, the AI's response must include a code block starting with mermaid.

Automatic Rendering​

FlowChat automatically detects and renders Mermaid code as long as the syntax is valid. If a diagram fails to render, it usually indicates a syntax error in the generated code. You can ask the AI to fix the syntax or refine your prompt for better results.

Interacting with Visualizations​

Once your diagram is displayed, you can:

  • Zoom & Pan: Examine complex diagrams closely by zooming in and out.
  • Copy Code: Click the copy button in the top-right corner to get the original Mermaid syntax.
  • Iterate: Ask the AI to modify, expand, or simplify the diagram in the next message.

Example​

FlowChat's Mermaid integration turns complex ideas into clear, professional visualizations.