Mermaid Chart: How This Company Creates Complex Diagrams From Markdown-Style Code

By Amit Chowdhry ● Aug 26, 2024

Mermaid Chart is a company that easily creates complex diagrams from markdown-style code and collaborates with team members in real-time. Pulse 2.0 interviewed Mermaid Chart founder and CTO Knut Sveidqvist to learn about the company.

Knut Sveidqvist’s Background

What is Knut Sveidqvist’s background? Sveidqvist said:

“My passion for software development began in my pre-teens. This passion led me to pursue a formal education in Computer Science; I obtained degrees from Umeå University in Sweden and the University of Edinburgh in Scotland. Since then, I have spent over 25 years working in the tech and software development industry. I’ve worked in various roles, ranging from development and architecture to product and project management.”

“I’m the creator of the award-winning Mermaid open-source project, a JavaScript-based diagramming and charting tool that garnered over 8 million users in 2023 and has achieved nearly 65,000 GitHub stars. Mermaid provided the foundation for Mermaid Chart.”

Formation Of Mermaid Chart

How did the idea for the company come together? Sveidqvist shared:

“The inspiration for starting the Mermaid project was a lost Microsoft Visio file (which is ironic considering Microsoft’s M12 fund was part of our recent $7.5 million seed round).”

“This was eight years ago. I’d lost track of the file and was forced to redraw everything. I thought to myself, ‘there has to be a better way to do this.’”

“The gears started turning in my head for this idea of a Markdown-style tool for creating diagrams. When I got home, my kids were watching The Little Mermaid on TV. The name just stuck in my head.”

“The Mermaid open-source tool really caught on in the software development community. I didn’t have any immediate plans to monetize it. Then, in 2022, I met some of the folks at Open Core Ventures (OCV), the venture capital firm of GitLab founder Sid Sijbrandij. Eventually, I was paired with my CEO Andrew Firestone, and here we are.”

Favorite Memory

What has been your favorite memory working for the company so far? Sveidqvist reflected:

“Working at Mermaid Chart has been the most rewarding time of my career.”

“One of my favorite achievements was leading the team to develop and launch the support feature for organizations. Seeing the entire team come together, working towards this common goal and swiftly launching this feature was incredibly satisfying. This project really brought our team spirit to life.”

“Another significant milestone was the creation of the Visual Editor. Not only was the development process very enjoyable, but more importantly, the positive response we received to the feature was outstanding. These projects advanced Mermaid Chart, making it more accessible and user-friendly. They also solidified our company’s culture and operational backbone.”

“It’s very difficult to choose just one moment, as each accomplishment has been uniquely rewarding.”

Core Products

What are the company’s core products and features? Sveidqvist explained:

“Mermaid Chart offers text-based diagramming and workflow management tools to help enterprise teams better communicate, collaborate, and solve business problems through visuals and diagrams.”

“Mermaid Chart’s platform was built on top of Mermaid’s core components, providing additional tools and functionality to bring value to its enterprise customer base. Mermaid Chart users can build and collaborate on diagrams such as flowcharts, state diagrams, and mindmaps in seconds or minutes — significantly faster than with traditional tools.”

“Key Features Include:

  • Simple Code Editor: Mermaid Chart is a diagram generator that relies on simple code. Users can type up their code on the left side of the editor, and Mermaid Chart will render the diagram for them. Every update you make to the code is mirrored in the design.
  • Visual Editor:  The Visual Editor provides a click-and-drag graphical user interface (GUI) that works in conjunction with Mermaid’s signature text-to-diagramming workflow. The code is updated dynamically when you make changes with the Visual Editor. It currently supports flowcharts and sequence diagrams.
  • Sample Diagrams: Mermaid Chart features a growing collection of 30+ Sample Diagrams in different formats: flow charts, class, state, mindmaps, quadrant charts, etc. These templates give you a starting point for the rest of your activities in the diagram generator.
  • AI Tools: Mermaid Chart offers two major AI tools to complement its diagram generator: an AI Chatbot and a ChatGPT integration.
    • The AI Chatbot, available to Pro users through the Mermaid Chart editor, helps users jumpstart the diagramming process. You can use the bot to: Create a diagram – ask the bot to build a diagram that can act as a starting point; Make edits – update the diagram layout, colors, and more; Fix your diagram: if your code is broken, the bot can try to fix it
    • The ChatGPT integration is also available to Free and Paid users with ChatGPT Plus. Once you’ve installed the Mermaid Chart plugin, you can give ChatGPT a prompt that generates a Mermaid Diagram. You can then jump right into Mermaid Chart to fine-tune and tweak your visual.
  • Teams: Users on the Pro tier can conduct a multi-user editing session with colleagues — even those outside of your organization. It’s similar to a “Google Docs” workflow.
    • Note: Users will be able to add Comments to diagrams beginning on April 15th.
  • Code-Base Integrations: Mermaid Chart’s Visual Studio Code plugin and JetBrains IDEA extension enable users to view, edit, and update diagrams within their code editor.”

Challenges Faced

What challenges have Sveidqvist faced in his sector of work recently? Sveidqvist acknowledged:

“The biggest challenge for my team is maintaining high-speed delivery without compromising quality. We’ve streamlined our development process, emphasizing lean methods tailored to a small team. This has minimized unnecessary overhead and expedited decision-making. To improve our efficiency, we’ve adopted better workplace practices and have relied on automated end-to-end testing.”

Evolution of Mermaid Chart’s Technology

How has the company’s technology evolved since launching? Sveidqvist noted:

1.) Supporting Broader Enterprise Use Cases: Mermaid Chart’s predecessor, Mermaid, mostly took root in the software development community. We’ve built Mermaid Chart’s features and functionality to appeal to any type of role within an enterprise (marketing, legal, business dev, etc) while still maintaining our core base of developers.

2.) Integrating the Visual Editor: One of our most enterprise-friendly new features is the Visual Editor, a GUI that allows users to build diagrams from simple drag-and-drop functionality. The Visual Editor works in concert with the Simple Code editor, giving users multiple options for editing their visuals.

3.) Adding AI Tools: Mermaid Chart’s AI Chatbot is a lot like a virtual assistant. The AI Chatbot is embedded into the Mermaid Chart platform to help users jumpstart the diagramming process, helping them to start, edit, and repair their diagrams. We’ve also released an integration with ChatGPT that allows users to create a jumping-off point for diagrams using simple GPT prompts.

4.) Bringing Diagrams Closer to Code: Our Visual Studio Code plugin and JetBrains IDEA extension help software developers reduce the distance between their code and their diagrams.

Significant Milestones

What have been some of the company’s most significant milestones? Sveidqvist cited:

  1. 2022: Knut Sveidqvist, creator of the award-winning Mermaid open-source project, founds Mermaid Chart in conjunction with Open Core Ventures.
  2. 2024: The company announces its Visual Editor for flowcharts and sequence diagrams. The Visual Editor provides a click-and-drag graphical user interface (GUI) that works in conjunction with the existing text-to-diagramming workflow.
  3. 2024: Mermaid Chart completes a $7.5 million Seed funding round.

Customer Success Stories

When asking Sveidqvist about customer success stories, he highlighted:

“We’re proud to share the story of Ari Tal, a data scientist and founder of Leveling Up with XAI, who utilizes Mermaid Chart for its easy-to-use flowchart creation capabilities to enhance their work in explainable AI (XAI). You can find Ari’s full customer story here.”

“A few quotes from Ari that show the utility of Mermaid Chart:

  • How did you discover Mermaid Chart?
    • “I came across Mermaid Chart when looking for an online tool to create flowcharts….What immediately drew me to the platform was the fact that I could build diagrams from simple code. Mermaid Chart’s syntax was easy to pick up and I was quickly hooked.”
  • What do you use Mermaid Chart for?
    • “Each page of the Level Up with XAI guide shows when it would make sense to use certain XAI techniques, and each page is accompanied by a flowchart to give an overview of the content.”
    • “In other words, I need to build a large number of flowcharts. That’s where Mermaid Chart comes in handy. I can quickly and easily create flowcharts from simple code and export them for use in the guide.”
  • What do you like about Mermaid Chart?
    • “The text-to-diagram functionality makes it super easy to build diagrams — without having to fiddle with the design. I can make good-looking flowcharts and sensibly organize them.”
    • “Once I make a change to the code, it’s automatically updated in the visual. I’ve really increased the speed at which I can create flowcharts, which saves me time for everything else required to keep my website up and running!”

Funding

After asking Sveidqvist about the company’s funding information, he revealed:

“We recently announced a $7.5 million Seed funding round. Mermaid Chart’s rapid global adoption has attracted investment from notable firms, including Microsoft’s M12, Sequoia Capital, Open Core Ventures (Sid Sibrandij, CEO, GitLab), Streamlined Ventures, Good Friends Capital (Dave Gilboa, Co-Founder and Co-CEO, Warby Parker), V1 VC (Benny Joseph, Chief Technology, Allbirds), Irregular Expressions, Firebrand VC, Elefund, Anorak Ventures, Gaingels, Mana Ventures, and others.”

Differentiation From The Competition

What differentiates the company from its competition? Sveidqvist affirmed:

  1. Brand RecognitionThe company was founded by Knut Sveidqvist, creator of the award-winning Mermaid open-source project, a JavaScript-based diagramming and charting tool that garnered over 8 million users in 2023 and has achieved nearly 65,000 GitHub stars.
  2. Robust Feature Set – It’s not enough to have a diagramming tool — enterprise pros need something more robust that allows them to communicate and collaborate. Mermaid Chart was started with the sole purpose of improving the foundational elements of Mermaid and making them more beneficial and accessible for enterprise teams.
  3. Designed for Collaboration – One of the biggest issues with most diagramming tools is that team members don’t have visibility into changes that are made. Mermaid Chart aims to increase transparency and allow users to make changes to diagrams in real-time, for all to see.
  4. Simple Interface  — Apps like Lucid Chart are very robust, but sometimes all you need is a simple diagram that allows you to move quickly. Mermaid Chart offers a no-frills experience to speed up your workflow, and make sure anyone can try it out.
  5. Versatile Use Cases  — It doesn’t matter what you do — software development, marketing, legal etc — anyone that needs to communicate ideas visually can use Mermaid Chart. Simple code and an intuitive Visual Editor mean the learning curve isn’t high.
  6. Simple Code or No-Code — No matter how you prefer to build your visuals, Mermaid Chart can support it. Our traditional simple code editor allows for easy tweaks, and those who prefer a GUI can use the Visual Editor.

Future Company Goals

What are some of the company’s future company goals? Sveidqvist pointed out:

“Our belief is that the future of software lies within open-core and the future of visual collaboration is in text, voice, and automation.”

“We aim to further develop and contribute to the Mermaid open-source community while also expanding our technologies to deliver impactful results for enterprise teams. Future updates will include enhanced support for visual editing across more diagram types, additional layout options for node placement, and improved AI capabilities for more precise and user-friendly model tuning.”

“We plan to introduce finer AI integrations that assist users immediately – suggesting diagram types or configuration options such as layout algorithms. Additionally, we will enhance collaboration features by implementing comment systems, workflows, and more plugins across various platforms. Our goal is to provide a definitive editing experience, making it more intuitive and powerful for all users.”

Additional Thoughts

Any other topics you would like to discuss? Sveidqvist concluded:

The Power of Open-Source Technology

Given its connection to the open-source tool Mermaid, Mermaid Chart’s roots are firmly entrenched in the open-source community. We’ve seen the impact that our open-source project Mermaid has made. Even as we build a commercial entity, we want to maintain the same scrappiness and customer devotion we exhibited while launching Mermaid. That means keeping in touch with our users, responding to their needs, and building the platform in their collective vision.

The Importance of Communication Tools For Distributed Enterprise Teams

Mermaid Chart is addressing a critical need for tools that help enterprise teams communicate, collaborate, and problem-solve. Distributed teams are more common than ever, with 62% of companies offering workplace flexibility as of late 2023. Given that 65% of people are classified as visual learners, Mermaid Chart helps enterprise users create the visuals and diagrams they need to communicate effectively in a distributed, digital environment.”

Exit mobile version