Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Editor
• 4 mins
Mermaid introduces Code Snippets in its editor, streamlining the diagramming process for developers and professionals
Mermaid is on a mission to make diagramming easy and 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 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?
If you’re new to Mermaid, here’s a quick recap: we took the best parts of Mermaid.js, 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 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 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’s pre-built sample diagrams. We’ve created templates for 29 different diagram types: flowcharts, class, state, mindmap, quadrant charts, git graphs etc.
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 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’s AI assistant.
Getting started with Mermaid
If you’re not already set up on Mermaid, create your free account. Our Basic plan gives you the ability to build up to three diagrams with limited AI and one team & project creation.
The Plus plan starts at $10 per user/month (billed annually) for even more diagramming power. You’ll unlock unlimited diagrams, limitless diagram size, 300 AI credits per year, and view & comment collaboration.
Need even more? The Premium plan ($20 per user/month, billed annually) is built for advanced users and teams, with 2,000 AI credits per year, unlimited free viewer seats, unlimited teams & project creation, co-editing collaboration and external sharing, and robust security with SSO.
Discover the easy and fun way to create diagrams with Mermaid.