Mermaid Support

Diagrammix3 supports importing and exporting diagrams using Mermaid syntax, a popular text-based diagramming language.

What is Mermaid?

Mermaid is a JavaScript-based diagramming tool that uses a markdown-like syntax to define diagrams. It's commonly used in documentation, wikis, and README files.

Example Mermaid syntax:

flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]

Importing Mermaid Diagrams

From Clipboard

1. Copy Mermaid syntax to your clipboard
2. In Diagrammix3, go to File → Import → Mermaid from Clipboard
3. The diagram will be created on your canvas

From File

1. Go to File → Import → Mermaid File...
2. Select a .mmd or .mermaid file
3. The diagram will be imported to your canvas

Supported Diagram Types

State Diagram Syntax

State diagrams model the states an object can be in and transitions between states.

Basic State Diagram:

stateDiagram-v2
    [*] --> Active
    Active --> Inactive : deactivate
    Inactive --> Active : activate
    Active --> [*] : terminate

States and Transitions:

• [*] represents start and end states
• --> creates a transition arrow
• : label adds transition labels
• Nested states use indentation

Composite States:

stateDiagram-v2
    state Processing {
        [*] --> Validating
        Validating --> Executing
        Executing --> [*]
    }

Result: A state machine diagram with proper state shapes and labeled transitions.

Import Examples

Flowchart

Mermaid Input:

flowchart TD
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

Result: A top-down flowchart with rectangle, rounded rectangle, and diamond shapes connected with labeled arrows.

Sequence Diagram

Mermaid Input:

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello Bob!
    B-->>A: Hi Alice!

Result: A sequence diagram with two participants and message arrows.

Class Diagram

Mermaid Input:

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()

Result: A UML class diagram with inheritance relationships.

Exporting to Mermaid

Export Current Diagram

1. Go to File → Export → Mermaid...
2. Choose a save location
3. The diagram is exported as a .mmd file

Copy as Mermaid

1. Select the shapes you want to export (or select all with Cmd+A)
2. Go to Edit → Copy as Mermaid
3. Paste the Mermaid syntax wherever you need it

Editing Imported Diagrams

Once imported, Mermaid diagrams become native Diagrammix objects. You can:

• Move and resize shapes freely
• Change styles using the Inspector (colors, fonts, line styles)
• Add new elements using Diagrammix tools
• Modify connections by dragging endpoints
• Apply auto-layout to reorganize the diagram

The connection to the original Mermaid source is not maintained - changes are made directly to the diagram objects.

Limitations

• Complex styling: Mermaid styling directives may not fully translate
• Subgraphs: Converted to grouped shapes
• Advanced features: Some Mermaid-specific features (like click handlers) are ignored
• Round-trip: Exporting an imported diagram may not produce identical Mermaid syntax

Tips

1. Clean up after import: Use auto-layout to organize imported diagrams
2. Check relationships: Verify that relationship types imported correctly
3. Style consistently: Apply Diagrammix styles for a polished look
4. Keep the source: Save your original Mermaid files for version control