Mermaid Chart is a free, online, collaborative, text-based diagramming platform that is powered by the award-winning Mermaid open-source project which is a JavaScript based diagramming and charting tool that dynamically renders text definitions to diagrams. Mermaid Chart enables you to create simple as well as complicated diagrams using plain markdown-style code while collaborating with your team members at the same time.
The tool supports the creation of a wide range of charts and diagrams such as Flowcharts, Sequence Diagrams, Class Diagrams, User Journeys, Gantts, Pie Charts, Mindmaps, Timelines and more. It thus assists you to streamline your code documentation, improves your workflow and team communication and also helps you to automatically generate diagrams representing complex ideas using AI (only for Pro users).
Working:
1. Click on this link to navigate to Mermaid Chart and register for a free account using your Google or GitHub credentials.
2. You will now be navigated to the Dashboard of Mermaid Chart. Next, click on ‘Personal and then click on the ‘+’ sign to head towards the live editor and start creating diagrams.
3. The interface displays a vertical tool bar towards followed by the code editor in the middle of the screen and finally the real time diagram viewer towards the right.
4. Input the markdown-type code in the code editor and observe that will be instantly rendered into a diagram in real time.
For example, look at the code below and the screenshot of the flowchart that the tool has created. Observe how the brackets have been rendered into various types of shapes such as Rectangle (with / without rounded corners), Hexagon and more
flowchart LR
A[Capture] –> B(Document) –> C{{Review and<br/>Approve}} –> D(Publish) –> E((( )))
Look at another code example below that creates a sequence diagram. Observe how the Sequence has been created using text-based arrow marks and the presence of a Note.
For more information on how you can use the Markdown-stye code to create simple and complex diagrams of various types, you can access the Mermaid Charts docs through this link.
5. To bring your diagram / chart in line with your project’s color scheme you can add some styling to it using the init directive as indicated in the screenshot below.
6. You can choose to create a diagram from scratch or start from the sample diagrams that have been provided by Mermaid. To access the sample diagrams, click on the topmost icon in the toolbar and choose the diagram that you wish. You can use the filters at the top of the popup box to search for specific diagrams and charts.
7. If you wish to change the diagram theme, click on the corresponding icon in the toolbar and then choose the theme that you desire. Observe that the diagram will be updated in real time.
8. Mermaid Chart offers several handy code snippets that you can use to build your diagram from scratch or modify it. To access the snippets, click on the third button (from the top) in the toolbar and go through all the snippets that have been provided. You can now click on any of the corresponding icons below the desired snippet to copy its code to the clipboard or insert it into the live editor.
9. When you are satisfied with your diagram or chart, you can click on the ‘Download’ button in the toolbar to export it to your system as a PNG or SVG file. Alternatively, you can click on the ‘Share’ button at the top right of the editor to copy its web link and send it to whomever you desire.
The free version of Mermaid Chart limits you to a maximum of 5 diagrams. To remove this restriction, you can subscribe to their Pro and Enterprise plans. Click here to read more about them.
The Teams feature of Mermaid Chart is available only for the paid users. It enables you to create projects and invite team members to collaborate on them so that a single source of information and truth exists across your organization.
Closing Comments:
Mermaid Chart is a great online tool that allows you to create several different types of charts and diagrams easily and quickly from plain markdown-style code. It has been offered as an extension of the open-source diagramming tool named Mermaid.
Go ahead and try out the product and do write to us about what you feel. Click here to navigate to Mermaid Chart.
