↓Skip to main content

Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor

·4 mins

Mermaid Chart introduces Code Snippets in its editor, streamlining the diagramming process for developers and professionals

Snippets

Mermaid Chart is on a mission to make diagramming easy and fun. Yup, we said fun!

Our latest feature will make it easier than ever for developers and other professionals to create clean, comprehensive diagrams. We’re excited to introduce our new Code Snippets functionality!

Mermaid Chart users can now insert any shape, edge or other element they need — directly into their diagrams — without writing extra code. Let’s break down how it works:

What is Mermaid Chart? #

If you’re new to Mermaid Chart, here’s a quick recap: we took the best parts of Mermaid, the open-source text-to-diagramming tool, and built a platform on top of it. We wanted to lean into Mermaid’s award-winning workflow that’s allowed thousands of users to render diagrams from simple code.

Mermaid Chart lets you do even more with your diagrams: collaborate with colleagues async or in real-time, leverage an AI chatbot to speed up your diagramming process and utilize a host of plugins to keep your diagrams up-to-date and in sync with your code.

How to use Code Snippets in the Mermaid Chart editor #

The Code Snippets functionality is designed for ease and efficiency. Using this feature is as simple as 1, 2, 3:

1. Open your diagram #

Click “+New Diagram” on the top right of the screen once you’ve entered your project. And here’s a quick tip; the “Samples” button is the first icon on the editor’s side menu. It’s located in the top left corner of the editor.

With this button, users can grab one of Mermaid Chart’s pre-built sample diagrams. We’ve created templates for 29 different diagram types: flowcharts, class, state, mindmap, quadrant charts, git graphs etc.

Snippets

2. Select your desired shape, edge or other element #

Once you’ve selected your sample diagram, click on the third icon down on the left-hand side of the editor (it’s the one with a triangle, circle and square).

You’ll see a wide variety of shapes, edges, arrows and other elements to choose from. The selection is context-dependent; you’ll see different element options based on which sample diagram you’re working with.

When you hover over the shapes icon, you’ll notice a tooltip that displays the text, “Code Snippets”.

3. Start using Code Snippets! #

Code Snippets offers Mermaid Chart users four options for bringing elements into their code:

  • Drag and Drop: Select the element (shape, edge, etc), and drag it into the text editor.
  • Copy/Paste: Navigate to the desired element. Click on the “copy” icon (which looks like two pieces of paper). Your element will get copied to your clipboard. Then use CTRL+V or right-click and select “paste” at the desired location in the code editor.
  • Insert: Place your cursor in the desired place in the text editor and click on the + icon to insert your code snippet.
  • Snippet functionality: Code snippets are templates that make it easier to enter code, such as nodes in flowcharts and other diagrams. The snippets contain placeholders that users can navigate between using the Tab key when updationg the temapte text to real data.

You might run into a “Diagram syntax error” if the element is dropped in a place that the editor doesn’t recognize. Pro users can click the “Repair diagram” button to recruit help from Mermaid Chart’s AI assistant.

Getting started with Mermaid Chart #

If you’re not already set up on Mermaid Chart, you can click here to create your free account. Our Free plan gives you the ability to build five diagrams and use all of our plugins.

The Pro plan starts at just $80/year for even more diagramming dynamics. You’ll get the most out of Mermaid Chart, including:

  • Mermaid AI diagramming
  • Unlimited diagrams
  • ChatGPT & Visual Studio Code Plugins
  • Presentation mode
  • Multi-user editing
  • Editor chatbot
  • Diagram & summary generator….

…. and a host of other features (revision history, custom workflows, comments, notifications).

Discover the easy and fun way to create diagrams with Mermaid Chart.

↑