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

4 mins

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.

Semantic NameShape NameShort NameDescriptionAlias Supported
ProcessRectanglerectStandard process shapeprocprocessrectangle
EventRounded RectangleroundedRepresents an eventevent
Terminal PointStadiumstadiumTerminal pointterminalpill
SubprocessFramed Rectanglefr-rectSubprocesssubprocess,subprocframed-rectanglesubroutine
DatabaseCylindercylDatabase storagedbdatabasecylinder
StartCirclecircleStarting pointcirc
OddOddoddOdd shape
DecisionDiamonddiamDecision-making stepdecisiondiamond
Prepare ConditionalHexagonhexPreparation or condition stephexagonprepare
Data Input/OutputLean Rightlean-rRepresents input or outputlean-rightin-out
Data Input/OutputLean Leftlean-lRepresents output or inputlean-leftout-in
Priority ActionTrapezoid Base Bottomtrap-bPriority actionprioritytrapezoid-bottom
Manual OperationTrapezoid Base Toptrap-tRepresents a manual taskmanualtrapezoid-top
StopDouble Circledbl-circRepresents a stop pointdouble-circle
Text BlockText BlocktextText block
CardNotched Rectanglenotch-rectRepresents a cardcardnotched-rectangle
Lined/Shaded ProcessLined Rectanglelin-rectLined process shapelined-rectangle,lined-proclin-proc,shaded-process
StartSmall Circlesm-circSmall starting pointstartsmall-circle
StopFramed Circlefr-circStop pointstopframed-circle
Fork/JoinFilled RectangleforkFork or join in process flowjoin
CollateHourglasshourglassRepresents a collate operationhourglass
CommentCurly BracebraceAdds a commentcommentbrace-l
Comment RightCurly Bracebrace-rAdds a comment
Comment with braces on both sidesCurly BracesbracesAdds a comment
Com LinkLightning BoltboltCommunication linkcom-linklightning-bolt
DocumentDocumentdocRepresents a documentdocdocument
DelayHalf-Rounded RectangledelayRepresents a delayhalf-rounded-rectangle
Direct Access StorageHorizontal Cylinderh-cylDirect access storagedashorizontal-cylinder
Disk StorageLined Cylinderlin-cylDisk storagedisklined-cylinder
DisplayCurved Trapezoidcurv-trapRepresents a displaycurved-trapezoiddisplay
Divided ProcessDivided Rectanglediv-rectDivided process shapediv-procdivided-rectangledivided-process
ExtractTriangletriExtraction processextracttriangle
Internal StorageWindow Panewin-paneInternal storageinternal-storagewindow-pane
JunctionFilled Circlef-circJunction pointjunctionfilled-circle
Lined DocumentLined Documentlin-docLined documentlined-document
Loop LimitTrapezoidal Pentagonnotch-pentLoop limit steploop-limitnotched-pentagon
Manual FileFlipped Triangleflip-triManual file operationmanual-fileflipped-triangle
Manual InputSloped Rectanglesl-rectManual input stepmanual-inputsloped-rectangle
Multi-DocumentStacked DocumentdocsMultiple documentsdocumentsst-docstacked-document
Multi-ProcessStacked Rectanglest-rectMultiple processesprocsprocessesstacked-rect
Paper TapeFlagflagPaper tapepaper-tape
Stored DataBow Tie Rectanglebow-rectStored datastored-databow-tie-rectangle
SummaryCrossed Circlecross-circSummarysummarycrossed-circle
Tagged DocumentTagged Documenttag-docTagged documenttag-doctagged-document
Tagged ProcessTagged Rectangletag-rectTagged processtagged-rectangle,tag-proctagged-process

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.

Author
Knut Sveidqvist
Creator of MermaidJS and founder of Mermaid Chart