Introducing Mermaid Chart’s JetBrains IDE Extension

Diagrams are essential for documenting your code. It’s important to have easy access to the visuals that explain the architecture and functionality of your systems – especially if you work in an agile environment where development moves fast, codebases are complex, and multiple stakeholders are involved.

That’s why Mermaid Chart is working to decrease the distance between your code and diagrams and increase the interconnectivity between your visuals and codebase.

Say hello to our JetBrains IDE Extension! Our plugin for IntelliJ IDEA — a Java-integrated development environment made by JetBrains — integrates Mermaid Chart directly into your coding workflow. The plugin also works for IntelliJ siblings such as WebStorm and pystorm.

Using the extension, developers can embed Mermaid Chart diagrams into their code. Any changes made to diagrams in Mermaid Chart will be automatically reflected within the code, as well.

Mermaid Chart is the platform built on top of Mermaid, the open-source text-to-diagramming tool. Our team, comprised of the founding members of the Mermaid project, is determined to build upon Mermaid’s foundation by providing developers with unique features and integrations to enhance their diagramming process.

Part of that mission includes ensuring that Mermaid Chart works seamlessly with the most common code platforms and IDEs. We want to meet developers where they are. That’s the inspiration behind our JetBrains IDE Extension, as well as our previously released Visual Studio Code plugin, which is available in the Visual Studio marketplace.

Benefits of the JetBrains IDE Extension #

What makes this extension so essential for JetBrains IDE users? We’ve got three main reasons:

Reduce duplicative efforts #

Using the extension means you’ll only have to make changes to your diagrams once. If you update your visual in Mermaid Chart, it automatically syncs up those changes in the IDE. Because our diagrams are text-based, there’s no need to redownload an image and re-upload it back into your code environment. This will save you time and make sure no one’s looking at an outdated diagram.

Resume old projects with ease #

Developers know the scenario: you started with a requirement, collaborated on a design session, and built diagrams to complement your code. Six months later, when you refine the requirement, you return to the code. But where are your diagrams? How can you find those old files in Jira or Confluence?

No need to worry! With the JetBrains IDE Extension, you’ll have direct and easy access to your diagrams within your code. Start editing with a simple click into the Mermaid Chart editor.

Improve your testing process #

It’s much easier to gain an understanding of what to test when your diagrams are easily accessible within your code. The extension helps you observe your diagrams and write test cases based on the workflows and relationships that are showcased.

5 simple steps to use the JetBrains IDE Extension #

Ready to reap the benefits? Just follow these easy steps to get started:

1. Install the extension #

Head to our Mermaid Chart extension page in the JetBrains marketplace and click the “Get” button in the top right corner. Look under “Plugin Versions” for the 1.1.3 option, and click the Download button on that line.

Follow the instructions from the modal. Once you’re in the IDE, open the “Settings” tab and click “Install Plugin from Disk.” Select the extension file.

2. Create a new token in Mermaid Chart #

Once you’re on the Mermaid Chart site, click on your avatar in the top right corner of the screen. Select “Settings” from the drop-down menu.

Select “Create New Token” under the “Secure tokens for plugins” card. Clicking on the “copy” icon automatically copies the token to your clipboard.

3. Input your token in the IDE #

Switch back into the JetBrains IDE. Select “Tools” from the drop-down menu, and scroll down to “Mermaid Chart” in the list. Enter the information from the token you just generated on the Mermaid Chart site.

Now you’re ready to start!

4. Select and input your diagrams #

You should now see the Mermaid Chart icon within your JetBrains IDE. Clicking this icon will bring you to a list of all of your folders and projects within Mermaid Chart. Bring your cursor to the desired spot within your code, and click on the name of your diagram.

A link to the visual should now be inserted into the code, with a red highlight to signify the location. When you select “View Diagram,” the diagram will open in a new tab in the code editor. Clicking “Edit Diagram” will bring you back to Mermaid Chart.

5. Make dynamic changes in Mermaid Chart #

Once you’re in the editor, you can make changes to your visual. Within moments, those changes will be reflected in the diagram you embedded into your code in the JetBrains IDE.

Try Mermaid Chart for free today! #

Not set up with Mermaid Chart yet? Click here to create your free account, which 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 unlimited diagrams, Mermaid AI diagramming, multi-user editing, and more.

We’re all about making the diagramming process easy, fruitful, and fun for developers. Our JetBrains IDE extension is just the start; we’ve got plenty more exciting developments coming soon!