Ideas in Code: Exploring the Art of Data Visualization with Mermaid Chart

Hello, everyone.

Welcome to another podcast from Code Ninja Global, where we invite industry leaders from across different verticals to know about the product that they're building and the services that they're providing to their customers. Today we have Andrew Firestone from Mermaid Charts. Mermaid Charts is a platform that is widely used by 8 million users, has a lot of stuff, stars and reviews from different platforms, GitHub as well. And in today's conversation, we're going to be chatting with Andrew, who is the CEO of Mermaid Chart, to know more about their journey, what are their goals for the product, and how they're taking this forward.

That's it. So, Andrew, I want to start off with. I was seeing your LinkedIn. You went to UCLA, then you started at Antler, and then you did Watson and Mermicha, then Mermichu. One of the challenge when we work with entrepreneurs is how they shape their ideas into products. You were working at Watson in very different thing. It was a loyalty platform for.

A.

Reward platform for some of the apartments and stuff like that. Mermaid is a very different thing. It's a development how you and you raised $3.2 billion for Watson. How did you manage the shift? I mean, why did you stop working at Watson?

Yeah, so kind of taking a step back in my career was always looking to start a tech company and started out, you know, in college, thinking about the different things that I was interested in. My family had built a lot of companies. I had built some companies when I was younger, always looking for ideas and thinking about different ways I could turn them into businesses. And I was the first employee at a tech startup right out of college. And then I spent about five years doing private equity for real estate, started a private equity fund building apartment communities and doing other types of real estate projects, a couple tech projects. And the thing that I was looking for was something kind of adjacent to what I had a skill set in. And so Watson was a connection of that, you know, as a loyalty and rewards program for apartment communities. So kind of taking the knowledge from the real estate experience that I had and then bringing that into tech. And then before that, I had spent a couple years at a venture capital fund working in venture studios and was really fascinated with the model. And that's how I. That's how I connected with Mermaid was through the venture studio that the CEO of GitLab had started. So OpenCore Ventures is Sid Sebrande's venture studio and he finds popular open source projects. He partners with the creator, they build for six months, co found a company together and Then they bring in kind of a co founder, CEO to then scale the business if it gets traction. And so they recruited me into the role about a year ago, about six months after I wound down Watson. And for me, it was a lot of the same types of skills that they needed for the business that I had utilized at Watson, mostly just kind of running the go to market motion and building out the team and raising the capital. We just closed our seed round led by Microsoft and with participation of 15 other great funds. And so it was kind of a really happy marriage. But the creator of Mermaid, the open source project, was also the founder of Mermaid Chart. And we spent a lot of time together kind of talking about what he was looking to build. And I was really excited about that. I was excited about the relationship. I was excited to work with the CEO of GitLab. And I think it's such an interesting space because you are covering a billion potential users of this type of software. It's a very broad space with a lot of deep niches within it. And that was really exciting to me. And it was exciting also that it was a really great piece of technology to apply to what was happening with large language models and an AI. And so I thought sitting at the intersection of being out of a venture studio, being part of an open source project, being a part of this AI wave, it was at the intersection of three really interesting things that were happening in tech and great fit for me and it's been a great ride so far.

Yeah, Andrew, One of the challenge I struggle with, and I see other entrepreneurs struggle with too, is like how to balance the excitement of doing too many things and then eventually start focusing on one thing and go on full force. For me saying, Watson, you co founded the. No, no, that's it. I'm done with bots and let's build mummy. This is a hard thing to do. This switch is very hard. I've been struggling with this. I've struggled with this, how to handle that thing as an entrepreneur.

Yeah, I mean, I think the thing that I focus on, a lot of people were saying, hey, so how did you end up going from fintech SaaS in real estate to, you know, visual collaboration software for software engineers and general knowledge workers? And to me, you know, business is business. I don't think it's that vastly different. Right. And the thing that I focus on is being able to learn faster and faster every day and to be able to, you know, kind of digest the information quickly. But in this case, I found a partner that who was Very technical, which is not my strong suit. And I found a kind of advisor, co founder of the business as CEO of GitLab, who knows open source really well. Right. And so having those two partners, I was able to bring my skill set and go to market and fundraising and team building. And I didn't have to be an expert. Day one at the market, I could execute on the principles that I've used in my previous roles and they apply, you know, 70, 80% and then you learn how to fill the gaps. And so it's been, it's been an intense year because I'm digesting so much information about this new market. But for me, focusing on building a framework in which I can, you know, learn quickly and then also be able to kind of iterate towards the right space and have a team that fills my gaps together, it's, it's a really good combination. And you know, if you're selling software to businesses, you know, one business is not so different than, than the next. And we also have the benefit of the open source project where so much of the distribution comes from that. So we can just be completely obsessed with the product, we can be completely obsessed with the engineering side of things. And the go to market piece, I don't want to say it solves itself, but it, it does a lot on its own.

Perfect. Got it. Andrew, we've been doing diagrams for last 10 years. We are software business or sales teams build technology diagrams, our architects build technology diagrams. And it's very hard to translate your idea into, into a diagram. It's not an easy stop. I mean, if you want others to come at the same tables, first thing you want to do is you want to bring a common framework through which you can collaborate. Diagrams do that. It allows us to communicate complex ideas. With Mermaid Chart, I want to first start off with how, I mean, what's your feedback? How developers are using it. And of course we'll shift ours as well. What's our feedback? What's all the. I want to go a bit deep into how developers are using Mermaid Chart and how do you think? Because for us, Andrew, we have won deals because of grid diagrams, because we were using it. And we won two deals, more than half a million dollars just because they said what great diagrams and blow apart. We didn't tell them that we are using an app for this. Let them feel that we built it. So what's your feedback? How the development community is responding, how your discord community is saying about it? What's your feedback?

Yeah, I mean it's been really incredible. The way that the company was started was just an idea from a real problem that the creator had. Knut, who created Mermaid, he was working in his code documentation, and they had a visio file. They lost the file and they lost their documentation for a whole piece of their code base, which was a disaster. And he thought, there's got to be a better way to be able to have the diagram in code, that you can actually edit in the code editor without having to touch your mouse. Right. It's. It just, you know, markdown was becoming popular at the time, and he thought, okay, I need to be able to have this directly within my code editor. And so he created the first piece of Mermaid. His daughter was watching Little Mermaid that night when he started the project, and that's where I got the name. And so he created it to solve his own problem and code documentation so that he could be more efficient when he's editing code. He wrote one blog post about it, and then 10 years later this year, we'll have over 6 million people use the Mermaid Live editor. And that's just the web app of the open source editor. We've got hundreds of thousands of users as well on the Mermaid Chart side. And then there's millions of people using it locally. So it's incredible if you have a product that has that organic growth trajectory. And it really resonated with software engineers, first for code documentation, then for architecture, then for communication. And so there's enormous number of applications with Mermaid Chart. Our idea was to create Mermaid for everyone, right? So not everybody knows how to code. Not everybody understands the structure of code. Right? And so AI was a natural entry point into that. And now you can write with plain text and you can get really complex diagrams which solves to your problem. You want to be able to create these diagrams. Hard to figure out how to get them out. It's really not fun to have a grapple user interface. We have to drop nodes, you have to connect them, and then if you change one, then you've got to change them all. The rendering algorithm that keeps everything organized for some people, when you're used to a graphical user interface, very frustrating because you want to be like, why can't I put this here? But if you understand how it's structured, it's extremely efficient. Right? Because the design is not the number one. It's the communication and it's the structure. And so that's been. That's been amazing. But.

And this is fascinating. Just want to comment that this is very fascinating. Because I mostly do Andrew.

Sales.

I part of sales. And when we talk to software architects, what they do is they give us software architecture and sales teams struggle to grasp that because they need to communicate to the customer. So especially on the edges where you want to talk to software architects, but you want more than that. You just don't want that software architects tell you you want some collaborative way to explain the complex ideas to the customer without bringing software architects with you in every call. That's the. That for us was that made our sales complete stack. We don't need those software architects in every call. They just tell us. And then we, with these, especially with me, chart, it allows us to be. I'm not saying we're at least 30, 35% as good as software architects in terms of explaining the complex.

I.

Okay, that's where we find most value out of mature. Because you said about you want mature for everyone, not for software. That's what I am mostly fascinated about and passionate about.

Yeah, yeah, absolutely. And so, yeah, I think it's really exciting. And I think for us, the future is to be able to expand on there's this huge universe of diagramming software. Right. Lucidchart, and then there's the whiteboarding software, which is more like Miro or something like that. What we want to do is we want to expand the use cases for diagramming so that you can communicate much more complex ideas from data that you wouldn't try to communicate because it would be too complex in a visual to represent in a diagram. Right. So linking with your databases, being able to understand everything that's in your GitHub. Right. Understand everything that's in your website, understand your user journeys in a much more granular level. And so there's so much that you can do, both creating a diagram and then having that diagram be living. And then the future is really to actually be able to manage all of the work that comes from that representation. Right. So we see ourselves more as a challenger for ServiceNow that manages these huge enterprise workflows than we see ourselves as a competitor of lucidchart. Even though today we look like another diagramming software, but tomorrow, the next day, you know, it's a lot more about actually automating away the work than it is about just creating a visual.

Yeah. And then I'm sure you also plan to add more collaboration tools to the workflow where teams can collaborate on a certain workflow or also like they're able to create workspaces where there's a collection of diagrams. I'M not sure if these features are covered in the Pro edition. I haven't tried it. But like, for like, one of the use cases that we adapt LucidChart for is for their collaboration feature and for the workspace feature. Apart from that, the workflow is quite straightforward in a sense. I use Chat GPT most of the time. I ask ChatGPT to visualize a complex idea for me with a Mermaid code. I take that Mermaid code to the Mermaid library. Train helps generate the diagram for me. Recently I was experimenting with these agent AI multi AI agents, and I had to visualize the PRs and the git commits and I saw this for visualization I was exploring different things and I saw this git graph diagram in MermaidJS. I wrote this AI agent which basically is triggered whenever there is a GitHub PR and for the PR I can pull all the commits in, then visualize those commits with Mermaid. So it's tremendous. One thing that I really appreciate is we generate a lot of documents through AI, especially reports and analytics that we do across all the repositories to trade productivity, performance and output across all our teams. I wrote this AI agent which basically listens for GitHub activity on our repositories and eventually create git graph for PRs and commits. That's important. We shared it along with our release notes because we work on customer repositories and it's important what activity happened on the repositories so that they can visualize everything. And that agent is basically written using Python select and then like we generate PDF reports. So I think users will benefit a lot from the ability to export those diagrams through PNG using an API. If we have that API where we can provide code, for example, and then provide the format that we want, want the result to export in and then, you know, we can take, you know, the resulting file and use it anywhere we like. For example, embedded in a PDF report or send it or email or like do whatever we like to do with it.

Yeah, that's good.

So right now we're generating markdown for the reports. But Markdown, GitHub, basically GitHub Markdown is support for Mermaid diagrams. So like, currently we're doing markdowns, but we definitely would like to, you know, to have the ability to embed those in PDFs as well in other formats. Yeah, so there's something like, you know, can. Can be made part of Jordeman.

Yeah, no, I think it's a really interesting use case and I think this is something we've gotten enormous number of requests for is an API for very similar purposes. And it's definitely on the roadmap. There's so much on the roadmap at the moment that when I joined we were four people, now we're 15. So we're 12 software engineers and three doing everything else. So very focused on the development side. We know where we need to go. We've got 10 years of data from customers about what they would like to see with Mermaid. And we have a lot of examples of individuals taking the technology and the software and applying it to different areas. And so we've got a big head start and, and it's great. But like you said, there's so many really interesting use cases like that that we can build into the platform. And that's one of the things that's exciting about the company is there's so much opportunity. We're still building the foundation of the skyscraper, but, you know, we're excited to see it start climbing upwards. Yeah.

Speaking of skyscrapers, I just want to pick your brain on foundational models. Generally when we as sales engineers, we use complexity ChatGPT to simplify the complex ideas and then we use Mermaid. So if you see on one tab we've opened Mermaid, on the other tab there is Chat GPT or Perplexity. So it goes hand in hand. What future do you see that foundational models has to play in diagramming? And where do you see there's a, there's a value that, that we can untap using both foundational models and in conjunction. How do you see that? How do you see the foundational models role there?

Yeah, I mean, I think it's going to become more and more part of how the work is done. Right. Like, I think one of the reasons that if you go to the GPT store, three of the most popular GPTs use are diagramming centric. Right. So, and most of them use Mermaid as, as the foundation. So it's, it's great that Mermaid kind of came first as the, you know, as the coding language for this. It translates really well into large language models. And so it's, it's the most prominently used. But I think that today you see a lot of interface where it's chat based. I think that that's one of a very large number of interfaces that will exist. Right. I think the command from chat will be much, much less common than the command from a database or from an API, you know, especially for these, for these different diagramming use cases where you're visualizing huge databases. You're visualizing these things that humans wouldn't attempt to visualize on their own. And I think that that's going to become more and more common within other products and also as their own products. And there's going to be specialization in each of these niches to become really productive. ChatGPT is pretty good at generating diagrams, right? But if you use now Mermaid AI, it's a little bit better, right? And soon it's going to be a lot better, right? So you start to train on very specific, you know, use cases and specific types of databases. You can start getting these really sophisticated diagrams. Whereas right now it's relatively simple, right? You're not getting the most complex outputs from ChatGPT. And there's limitations usually on most of the commercially available products out there. Our goal is to make them not only command based, but also living in real time. So you're constantly updating as your code base changes, your diagram of that code base should change in real time as well. For example.

So yeah, speaking of that, I mean I just want to have a, I think I would be. Most of the entrepreneurs, they use ChatGPT as a foundation for build great products and then this is like in the next release of jgpd, what they see, they're screwed up. So building a rapper perhaps. I'm not sure how great this is. Mermaid of course is not a rapper, but of course I, I want to as a, as a entrepreneur, as a CEO. Mermaid, how did you see how, how do you advise for entrepreneurs who are building their product on top of foundational models, how they can find a more gap, more better? What I say they want to be more better, right? Because they don't want to be screwed up in the next version of charity. How to handle that because I've seen lots of contractors there. That's exactly going on. Okay, what in, what would be in GPT5, what would be in that are going to be over, as you said, the top three apps on GPTR diagram.

Yeah, I think it really depends where they're building, right. I think if you're building in a deep niche where you have, you know, an opportunity to add a ton of data to the model, then that can be, you know, the value add. I mean it's, it's similar to any data business, right? If you have a data advantage now, that advantage can be amplified at least in the short term with different AI related features. I think that there's kind of two sides to this. There's the model on the back end and then there's the interface. Those are the two areas I think you can innovate in. And then you can add data to enhance, ideally both of those. But you know, for entrepreneurs in general, I think that the models that exist today are good enough for proof of concept on a lot of things.

Right.

But how good are they at actually executing the real job to be done, often not that good. Right. And to be good, you got to train them on your own data set or you've got to build an interface that's really custom so that the output is really valuable. So for us, I think people use Chat GPT similar to templates, right? So it's almost like a personalized template. You start your job in ChatGPT, but you don't finish it. Right? And so we've, we've kind of created our own, our own version of that. Soon we'll have living templates where they can be customized. Right. With ChatGPT. So instead of just getting that generic template for XYZ, you can explain what you want. We'll give you a really sophisticated template, you know, so it's another way to kind of start your work. But what I want to do is I want to start your work and finish your work all in the same, you know, end to end interface. And that's something that's not being done as much. And usually the connective tissue in between is a human. But there's so much that could be done without a human in the mix. And so you see AI on the front end kind of starting projects, AI on the back end kind of of ending projects or enhancing the kind of output of the data. But I think there's an opportunity to connect the dots and I think it's, you know, the, the thing that's cool is you can build a product that has a lot of value now with an AI model, if you have that distribution, if you can marry that distribution with it. For us, we had the distribution already with, with Mermaid and then we also had a really large audience, a lot of customer service feedback and a use case that's really applicable to AI. So you put those together, that becomes a, a pretty good company, we hope. But you know, that's kind of the beginning of our journey. And now we're trying to figure out, okay, how do we connect the dots here?

Yeah, I love this template example. I think this is incredibly lo.

Thank you for, thank you for that, Andrew. So we already have got VS code extension for basically. It basically gets coupled with the VS code default markdown preview Extension.

As you.

Said that I can still use GitHub copilot to actually generate or mid code for whatever I have in my repository and then you know, take that code to markdown file and then visualize it within my versus code. Do you also plan to offer their extension? Basically enrich this extension with the feature that we just spoke about. Like a one stop shop for all the diagramming so we can interact with that extension within our code editor and then actually generate diagrams without leaving our code editors. So like instead of doing it in browser, like do it in our code editor.

Absolutely. It's in production right now and would love to set you up with our product team to get your feedback on how to. How to refine that because it's. We have released our plugin, it's not very good and the next version is going to have all the things that you just mentioned, but exactly right. VS Code is probably the best plugin store for this type of application. The one that you're talking about has 1.8 million installations. Right. That's spectacular. What a great proof of concept for our business. But it also has very limited functionality in that plugin. It just happens to be the best version of that tool. But it's one person who built that. We actually just acquired another VS code plugin that has a similar. Less. Less installations but very similar functionality and we're going to be updating both of them with the kind of mermaid 2.0 within the next three months or so. You want to great on.

On the last part. I mean we have several minutes left. Andrew, yesterday meta released llama 3.1.

Right.

It's a new release of Llama Family foundational models. One of the things I want to pitch your brain as a business leader.

Is.

You are basically building this great product on top of Open Source.

Right?

I mean that's your. I mean that's how. How you see Open source foundational models versus for example OpenAI Enterprise or businesses. Why I'm asking this is like we work with lots of businesses. Some of them are some of the world's most important institutes and they ask us like how can we choose one between OpenAI Enterprise open source, especially if they have same sort of parameters. That's my first question what it means when it comes to Open source Power foundation models. And second, I want to pick your brain on is your view of AI in next five to seven years you're working with some of the most elite developers in the world. What they tell you about AI when.

It comes to developer productivity. Yeah, I mean, I think the models, it's a challenge because the evolution is happening very quickly. So nobody really knows the right answer, I would say. And the right answer changes constantly in terms of what will work for this particular use case. What we've seen is that every model responds to differently to the different use cases. Right. So we're very deep into diagramming models. How good can we get our diagramming to be? There's some platforms, actually one of our kind of batch mates or one of the companies that just got funded by Microsoft M12 as well as part of the GitHub Fund, they have a platform that allows you to use all the different models that are available through one API. So it will toggle between these different models, which I think is a pretty good idea because everybody's trying to test already these different models. No, it's not Grok. I have to look up the name. But it's an interesting thing and I think for us we found that most models are not that good at diagramming. So, you know, that's a good, a good thing for us to some extent. But that changes every release. Right. So, you know, Claude comes out with their, you know, new thing and that's actually pretty good. Right. And they just. We're starting to see an enormous amount of traffic to our open source project. Originally it was from ChatGPT, now it's coming from Claude, you know, and all these different plugins are pointing to our project because that's where you know, most people want to go. Like we said with templates, you start your diagram with AI and then you finish it with an editor. And so most people want all that into one. That's what our Pro product provides. But the, the answer is a challenge because, you know, there is no, there is no right answer. But I think all the models are good for different things and you just gotta keep testing them and that you're not gonna make a decision. And it'd be right forever. It's gonna be right for a very short period of time.

Yeah. Incredible. I think on a final note, I mean, you're on product hunt recently on. You went there. I think what. As a, as a sales leader who works at the intersection of both technology and sales, I want everyone out there who is doing sales and pre sales and sales in general, to use my chart. I think there's no better way to communicate complex ideas to the customers. You do not need software architects and they, frankly, they don't have that much. I mean, if sales requires lots of communication, different skills than Software architecture. What good it is that imagine now I can explain that complete software architecture through moment chart to my customer and wind deals. Right. I want everyone to use that and that's why I'm so excited about. It's incredible. And Andrew, I want you to be successful at this I really want you to be successful at this very great thing out of it because that's helps us a lot and helps people not to only software architects, but the people who are working on the edges of the technology. When software architects they have to build or software developers they have to build grade diagram they will. It's us who find it hard to go deeper into the code and come up with things like this.

Right.

But AI can move that process and if we have that thing as a baseline, we can do what better job in explaining complex ideas to our customers. So thank you for doing it.

Thank you.

And I wish you lots of success with Nomitja. You're doing an incredible job, Andrew.

Appreciate it. Appreciate it, guys. Yeah. Well, thanks for having me and yeah, looking forward to keeping in touch and excited to see what you guys think of our latest release. Yeah.

Thank you Andrew, so much.

Take care.