Expanding the Horizons of Mermaid Flowcharts: Introducing 30 New Shapes!

Discover 30 new shapes in Mermaid flowcharts, offering enhanced clarity, customization, and versatility for more dynamic and expressive visualizations.

Mermaid fans, get ready! We’re thrilled to announce that we have introduced 30 brand-new shapes to Mermaid flowcharts. This significant upgrade takes the flexibility and depth of flowchart creation to a whole new level. Whether you are mapping out complex workflows or crafting simple diagrams, these new shapes will bring precision and style to your flowcharts.

These new additions are more than just aesthetically pleasing. Introducing these new shapes improves visual clarity by helping to distinguish various types of processes, actions, or statuses, making flowcharts easier to read and understand, especially for those unfamiliar with the workflow. Each shape can carry a specific semantic meaning, allowing closer alignment between the visual representation and its actual function. For example, the “database” shape signifies data storage, while the “manual input” shape indicates an action requiring human intervention. With more options, users have greater flexibility to customize their flowcharts, mixing and matching shapes to suit specific audiences. Additionally, these new shapes increase the versatility of Mermaid flowcharts, allowing them to represent a wide array of scenarios, from simple processes to complex systems, across fields such as business, IT, and project management.

Syntax Simplification and Challenges #

One of the major challenges we faced when adding these new shapes was designing a robust and easy-to-remember syntax. Mermaid’s syntax already allows for shorthand notations, but we realized that a new approach was required with an increasing number of shapes. There are only so many combinations of parenthesis and brackets you can remember.

Instead of relying solely on shorthand, we’ve introduced a general syntax structure that adds data directly to the shape using this format:

A@{ shape: rect }

This syntax creates a shape with ID A represented as a rectangle. It renders just as A["A"] would, but offers the flexibility to define additional attributes such as custom shapes. You can add the label attribute to set the label. One thing to note is that the shape attribute wins over the shorthand, making it possible to use the shorthand for the label and add the shape using the attributes like this A[A label]@{ shape: doc }.

New Shapes Overview #

Here’s a sneak peek at the new shapes and how you can use them to improve your Mermaid flowcharts:

The following table is just a tiny taste of what the new shapes offer. Each shape has a clear semantic meaning, from cylinders representing databases to trapezoids indicating manual processes. Whether you’re displaying data flow, decision branches, or workflow automation steps, these additions allow you to capture every nuance.

Example Usage #

flowchart RL
    subgraph "Main Process"
        A[File Handling]@{ shape: manual-file}
        B5[User Input]@{ shape: manual-input}
        C5[Multiple Documents]@{ shape: docs}
        D5[Process Automation]@{ shape: procs}
        E5[Paper Records]@{ shape: paper-tape}
    end
    subgraph "Additional Process"
        A2@{ shape: fork, label: "Parallel Processing"}
        B2@{ shape: hourglass, label: "Timed Operation"}
        C2@{ shape: comment, label: "Note: User Intervention Required" }
    end

This example shows a flowchart that uses several new shapes, such as manual-file, manual-input, and docs, making the chart more expressive and accessible to follow. It also shows how labels can be added using shorthand notation or as attributes.

Closing Thoughts #

These new shapes give Mermaid flowchart creators great control over their diagrams. Whether you’re dealing with simple workflows or complex processes, these shapes will provide greater depth and clarity to your visualizations. Happy charting!

If you’re excited about this new update or have any questions, please share your thoughts. You can try the shapes today at https://www.mermaidchart.com/play or wait for the official Mermaid release in September 2024.