Mermaid Diagrams

The platform includes integrated support for creating and editing Mermaid diagrams directly within chat conversations.

What Are Mermaid Diagrams?

Mermaid is a diagramming language that lets you create visual diagrams using text-based syntax. The 4C:me Safe AI Platform renders these diagrams directly in the chat interface.

Supported Diagram Types

• Flowcharts — Process flows and decision trees
• Mind maps — Hierarchical idea mapping
• Sequence diagrams — Interaction flows between systems
• Class diagrams — Object-oriented design
• State diagrams — State machine representations
• Gantt charts — Project timelines
• And more Mermaid-supported types

Creating Diagrams

In Chat

Simply ask 4C:me to create a diagram:

"Create a flowchart showing the user onboarding process"

"Make a mind map of our project structure"

"Draw a sequence diagram for the API authentication flow"

4C:me generates the Mermaid code and renders the diagram inline in the chat.

Editing Diagrams

The platform provides an integrated Mermaid editor:

1. Click on a rendered diagram to open the editor
2. A confirmation dialog appears before opening the external Mermaid editor
3. Make your changes in the editor
4. The diagram updates in the chat

Correction Handling

If a diagram has rendering issues:

• The platform attempts automatic correction
• You can ask 4C:me to fix specific issues
• The Mermaid editor provides syntax validation

Debugging

For developers and advanced users, the platform supports diagram debugging to help identify and fix issues in Mermaid syntax.

Mind Maps

Mind map rendering has been specifically optimized:

• Improved rendering for complex mind maps
• Better layout and spacing
• Fixed issues with nested nodes

Tips

• Start with simple diagrams and add complexity iteratively
• Use descriptive node labels for clarity
• Ask 4C:me to "improve" or "fix" a diagram if the initial result isn't quite right
• Export diagrams by taking a screenshot or using the download feature