← Back
Scott Hanselman May 9, 2024 25m

Open Core Open Source with Mermaid Chart's Knut Sveidqvist

Read full transcript 17 segments
  1. hi I'm Scott Hansel and this is another hi I'm Scott Hansel and this is another episode of Hansel minutes today I'm episode of Hansel minutes today I'm episode of Hansel minutes today I'm talking with M ffist he's the CTO of talking with M ffist he's the CTO of talking with M ffist he's the CTO of mermaid chart calling in I assume are mermaid chart calling in I assume are mermaid chart calling in I assume are you in Stockholm right now no I'm in you in Stockholm right now no I'm in you in Stockholm right now no I'm in upola it's 90 kilm North of Stockholm upola it's 90 kilm North of Stockholm upola it's 90 kilm North of Stockholm see that's very similar I'm in Port but see that's very similar I'm in Port but see that's very similar I'm in Port but I'm not really in Portland I'm like 90 I'm not really in Portland I'm like 90 I'm not really in Portland I'm like 90 km outside in a small town no one's ever km outside in a small town no one's ever km outside in a small town no one's ever heard of so I just tell people I'm in heard of so I just tell people I'm in heard of so I just tell people I'm in Portland and they go okay now I know Portland and they go okay now I know Portland and they go okay now I know where you are yeah I usually do that where you are yeah I usually do that where you are yeah I usually do that sometimes when I hand in clothes for sometimes when I hand in clothes for sometimes when I hand in clothes for testing then I don't say cot because no testing then I don't say cot because no testing then I don't say cot because no one remembers have to explain but I say one remembers have to explain but I say one remembers have to explain but I say Tom or something yeah I I think names Tom or something yeah I I think names Tom or something yeah I I think names matter though and locations matter so I matter though and locations matter so I matter though and locations matter so I am happy to have you here chatting with am happy to have you here chatting with am happy to have you here chatting with me today so you are the CTO of mermaid me today so you are the CTO of mermaid me today so you are the CTO of mermaid chart and help me understand mermaid chart and help me understand mermaid chart and help me understand mermaid chart is a company built on top of the chart is a company built on top of the chart is a company built on top of the mermaid diagramming and charting tool mermaid diagramming and charting tool mermaid diagramming and charting tool which was a a JavaScript based tool that which was a a JavaScript based tool that which was a a JavaScript based tool that you created how does a open source you created how does a open source you created how does a open source project become a company I had no plans project become a company I had no plans project become a company I had no plans of starting a company or actually doing of starting a company or actually doing of starting a company or actually doing anything for anyone else but my acute anything for anyone else but my acute anything for anyone else but my acute problem at at work I worked at the large problem at at work I worked at the large problem at at work I worked at the large Telecom company in Sweden at the point Telecom company in Sweden at the point Telecom company in Sweden at the point we had lots of diagrams and we had lots of diagrams and we had lots of diagrams and documentation in word in visu and at documentation in word in visu and at documentation in word in visu and at that point one of the originating Vis that point one of the originating Vis that point one of the originating Vis files were gone we had only like like files were gone we had only like like files were gone we had only like like the copy and word so I thought has to be the copy and word so I thought has to be the copy and word so I thought has to be a better way of doing this and it was at

  2. a better way of doing this and it was at a better way of doing this and it was at the same time this was almost 10 years the same time this was almost 10 years the same time this was almost 10 years ago so markdown was getting traction and ago so markdown was getting traction and ago so markdown was getting traction and I thought if we could have the diagrams I thought if we could have the diagrams I thought if we could have the diagrams in text that would be so much better as in text that would be so much better as in text that would be so much better as developers we are like text artists our developers we are like text artists our developers we are like text artists our whole work environment is aimed at whole work environment is aimed at whole work environment is aimed at manipulating text in a good way and manipulating text in a good way and manipulating text in a good way and having diagrams in text would be great having diagrams in text would be great having diagrams in text would be great and later that day I went home and sat and later that day I went home and sat and later that day I went home and sat down with my kids in the living room down with my kids in the living room down with my kids in the living room with my laptop in my knee they were with my laptop in my knee they were with my laptop in my knee they were watching The Little Mermaid and then watching The Little Mermaid and then watching The Little Mermaid and then what should I call the what should I call the what should I call the directory and the mermaid it was so directory and the mermaid it was so directory and the mermaid it was so that's how I started the the project that's how I started the the project that's how I started the the project just to solve my own problem and then um just to solve my own problem and then um just to solve my own problem and then um I thought this is quite good I should I thought this is quite good I should I thought this is quite good I should make it available for the world in a make it available for the world in a make it available for the world in a sense because use open source so much in sense because use open source so much in sense because use open source so much in all different incarnations of your work all different incarnations of your work all different incarnations of your work nice to give back that was like the nice to give back that was like the nice to give back that was like the thought and um I just put the link to thought and um I just put the link to thought and um I just put the link to the repo in in a blog somewhere one of the repo in in a blog somewhere one of the repo in in a blog somewhere one of these JavaScript news link collectors these JavaScript news link collectors these JavaScript news link collectors and uh it took off I didn't expect it I and uh it took off I didn't expect it I and uh it took off I didn't expect it I thought maybe 20 people will use it that thought maybe 20 people will use it that thought maybe 20 people will use it that will be fun will be fun will be fun and you know and 20 people would have and you know and 20 people would have and you know and 20 people would have been success though right because 20 is been success though right because 20 is been success though right because 20 is more than one and you made it for more than one and you made it for more than one and you made it for yourself and if your friends use it and yourself and if your friends use it and yourself and if your friends use it and your company used it the problem would your company used it the problem would your company used it the problem would have been solved for those people yes have been solved for those people yes have been solved for those people yes the rest is a bonus you can say yeah the rest is a bonus you can say yeah the rest is a bonus you can say yeah yeah yeah one of the things I like to do yeah yeah one of the things I like to do yeah yeah one of the things I like to do when I look at a uh a GitHub is I go

  3. when I look at a uh a GitHub is I go when I look at a uh a GitHub is I go under contributors and commits and you under contributors and commits and you under contributors and commits and you can see that chart you know you're the can see that chart you know you're the can see that chart you know you're the number one committer to mermaid uh and number one committer to mermaid uh and number one committer to mermaid uh and then a gentleman named sidart vade is then a gentleman named sidart vade is then a gentleman named sidart vade is number two but you can look at almost number two but you can look at almost number two but you can look at almost like the expression of your excitement like the expression of your excitement like the expression of your excitement in the project in your life in 2015 in the project in your life in 2015 in the project in your life in 2015 there's this massive Spike of creativity there's this massive Spike of creativity there's this massive Spike of creativity and then 2018 2019 you're kind of like and then 2018 2019 you're kind of like and then 2018 2019 you're kind of like hanging out and someone else did some hanging out and someone else did some hanging out and someone else did some work and then 2020 that you know covid work and then 2020 that you know covid work and then 2020 that you know covid happens and then you have nothing to do happens and then you have nothing to do happens and then you have nothing to do I assume and you get energy again but I assume and you get energy again but I assume and you get energy again but you're the CTO CTO don't usually also be you're the CTO CTO don't usually also be you're the CTO CTO don't usually also be main committers they're usually like main committers they're usually like main committers they're usually like Architects but you're still the prim Architects but you're still the prim Architects but you're still the prim committer with almost 2500 commits to committer with almost 2500 commits to committer with almost 2500 commits to this project almost 10 years later yeah this project almost 10 years later yeah this project almost 10 years later yeah it's exactly as you say that first it it's exactly as you say that first it it's exactly as you say that first it took off there were a lot of changes in took off there were a lot of changes in took off there were a lot of changes in the beginning and then sort of realized the beginning and then sort of realized the beginning and then sort of realized okay you get all these issues reported okay you get all these issues reported okay you get all these issues reported have to do here's the real real story I have to do here's the real real story I have to do here's the real real story I want to have zero want to have zero want to have zero issues so I really worked hard to keep issues so I really worked hard to keep issues so I really worked hard to keep that down you know keep it clean but of that down you know keep it clean but of that down you know keep it clean but of course I couldn't and that almost ended course I couldn't and that almost ended course I couldn't and that almost ended me so I sort of had the motivation me so I sort of had the motivation me so I sort of had the motivation decline at that point that's when I got decline at that point that's when I got decline at that point that's when I got support uh from others which is good and support uh from others which is good and support uh from others which is good and then after a while I got my energy back then after a while I got my energy back then after a while I got my energy back and started to work with it again but at and started to work with it again but at and started to work with it again but at that point I had a different strategy so that point I had a different strategy so that point I had a different strategy so I took one maximum two evenings in the

  4. I took one maximum two evenings in the I took one maximum two evenings in the week that I dedicated to mermaid and the week that I dedicated to mermaid and the week that I dedicated to mermaid and the rest I didn't think about it because you rest I didn't think about it because you rest I didn't think about it because you can get a burnout fairly easy by working can get a burnout fairly easy by working can get a burnout fairly easy by working a full job you have a family you have a full job you have a family you have a full job you have a family you have everything all around you and then you everything all around you and then you everything all around you and then you have this that you're really passionate have this that you're really passionate have this that you're really passionate about as well in the mix and yeah that about as well in the mix and yeah that about as well in the mix and yeah that equation doesn't work not when you equation doesn't work not when you equation doesn't work not when you parent for instance the kids have to go parent for instance the kids have to go parent for instance the kids have to go first and you always feel I should have first and you always feel I should have first and you always feel I should have done more I wanted to do that but I done more I wanted to do that but I done more I wanted to do that but I couldn't yeah that's a really healthy couldn't yeah that's a really healthy couldn't yeah that's a really healthy attitude I think we see a lot of people attitude I think we see a lot of people attitude I think we see a lot of people in open source burning out giving up in open source burning out giving up in open source burning out giving up abandoning projects I was mentioning to abandoning projects I was mentioning to abandoning projects I was mentioning to you and we were beginning this podcast you and we were beginning this podcast you and we were beginning this podcast that I've done over that I've done over that I've done over 940 or 150 episodes and people always 940 or 150 episodes and people always 940 or 150 episodes and people always think that's impressive and I always think that's impressive and I always think that's impressive and I always think it's not that impressive because think it's not that impressive because think it's not that impressive because it's only once a week if it was every it's only once a week if it was every it's only once a week if it was every day I would have burned out years ago day I would have burned out years ago day I would have burned out years ago right like life is a marathon not a right like life is a marathon not a right like life is a marathon not a Sprint so I I it's it's cool that like Sprint so I I it's it's cool that like Sprint so I I it's it's cool that like is that a is that a Swedish philosophy is that a is that a Swedish philosophy is that a is that a Swedish philosophy to just like time box two days a week or to just like time box two days a week or to just like time box two days a week or is that just your own personal maturity is that just your own personal maturity is that just your own personal maturity that's my coping mechanism there and you that's my coping mechanism there and you that's my coping mechanism there and you just let go of the idea that you were just let go of the idea that you were just let go of the idea that you were going to hit 100 zero bugs and it's okay going to hit 100 zero bugs and it's okay going to hit 100 zero bugs and it's okay yeah and I mean the community has been yeah and I mean the community has been yeah and I mean the community has been really positive I haven't really had any really positive I haven't really had any really positive I haven't really had any of that toxicity that you can see on the of that toxicity that you can see on the of that toxicity that you can see on the internet maybe one or twice few but internet maybe one or twice few but internet maybe one or twice few but overwhelmingly majority is been very overwhelmingly majority is been very overwhelmingly majority is been very rewarding feedback which is uh also been

  5. rewarding feedback which is uh also been rewarding feedback which is uh also been very fun but during that time with a very fun but during that time with a very fun but during that time with a sort of scal back support with the two sort of scal back support with the two sort of scal back support with the two days per week that's sort of when you days per week that's sort of when you days per week that's sort of when you started to think would be great to work started to think would be great to work started to think would be great to work with this do it for a living and at the with this do it for a living and at the with this do it for a living and at the same time there were Traction in the same time there were Traction in the same time there were Traction in the project so started to feel that this project so started to feel that this project so started to feel that this could happen but it uh did not come by could happen but it uh did not come by could happen but it uh did not come by itself in a sense because uh when there itself in a sense because uh when there itself in a sense because uh when there are that much things around you I've are that much things around you I've are that much things around you I've started couple of small companies but started couple of small companies but started couple of small companies but just sort of one man thing not a real just sort of one man thing not a real just sort of one man thing not a real startup so the way there was a bit far I startup so the way there was a bit far I startup so the way there was a bit far I had some investment firms approach me had some investment firms approach me had some investment firms approach me but nothing that felt good in that sense but nothing that felt good in that sense but nothing that felt good in that sense but I still had that that dream and uh but I still had that that dream and uh but I still had that that dream and uh that's when Sid sibrand not from gitlab that's when Sid sibrand not from gitlab that's when Sid sibrand not from gitlab because it's not he is CEO of gitlab but because it's not he is CEO of gitlab but because it's not he is CEO of gitlab but it's not in that role that he approached it's not in that role that he approached it's not in that role that he approached me but um he has this Venture company me but um he has this Venture company me but um he has this Venture company Studio that that U works with the open Studio that that U works with the open Studio that that U works with the open core model ocv and he approached me and core model ocv and he approached me and core model ocv and he approached me and that point so some guy from the internet that point so some guy from the internet that point so some guy from the internet approach you and says that want to start approach you and says that want to start approach you and says that want to start a company together so I had to do some a company together so I had to do some a company together so I had to do some Googling and simply jit and here we are Googling and simply jit and here we are Googling and simply jit and here we are some guy from the internet so the open some guy from the internet so the open some guy from the internet so the open core model is a business model that core model is a business model that core model is a business model that allows you to basically take open source allows you to basically take open source allows you to basically take open source software and commercialize it so you're software and commercialize it so you're software and commercialize it so you're saying that the core of mermaid remains saying that the core of mermaid remains saying that the core of mermaid remains and will always be open source and then and will always be open source and then and will always be open source and then you sprinkle better things on top of it

  6. you sprinkle better things on top of it you sprinkle better things on top of it for free Pro for free Pro for free Pro Enterprise has that been been Enterprise has that been been Enterprise has that been been challenging to decide which parts of challenging to decide which parts of challenging to decide which parts of mermaid should be forever free and which mermaid should be forever free and which mermaid should be forever free and which parts should be for for business yeah parts should be for for business yeah parts should be for for business yeah they cost quite a lot of uh thinking so they cost quite a lot of uh thinking so they cost quite a lot of uh thinking so I mean it's really important to get the I mean it's really important to get the I mean it's really important to get the clear cut there shouldn't be Gray Zone clear cut there shouldn't be Gray Zone clear cut there shouldn't be Gray Zone about what is open source and what is about what is open source and what is about what is open source and what is not because that will just cause both not because that will just cause both not because that will just cause both frustration and maybe even heartache in frustration and maybe even heartache in frustration and maybe even heartache in the long run and uh there ocv was really the long run and uh there ocv was really the long run and uh there ocv was really good at coaching in in that sense or good at coaching in in that sense or good at coaching in in that sense or where should we draw the line what I where should we draw the line what I where should we draw the line what I really did want to avoid is that you get really did want to avoid is that you get really did want to avoid is that you get the pull request to mermaid for a non-op the pull request to mermaid for a non-op the pull request to mermaid for a non-op source feature that would be really bad source feature that would be really bad source feature that would be really bad because then would really be a clash of because then would really be a clash of because then would really be a clash of Interest suddenly and right now up to Interest suddenly and right now up to Interest suddenly and right now up to now it has been the opposite maybe now it has been the opposite maybe now it has been the opposite maybe thanks to that clear cut so basically thanks to that clear cut so basically thanks to that clear cut so basically mermaid itself that's open source and mermaid itself that's open source and mermaid itself that's open source and will will remain that way so what we do will will remain that way so what we do will will remain that way so what we do is around Mermaid so the new diagrams we is around Mermaid so the new diagrams we is around Mermaid so the new diagrams we added those have been added into the added those have been added into the added those have been added into the open source part whereas our our open source part whereas our our open source part whereas our our platform where we use mermaid that's uh platform where we use mermaid that's uh platform where we use mermaid that's uh the paid platform how many different the paid platform how many different the paid platform how many different diagrams are there now yeah that's your diagrams are there now yeah that's your diagrams are there now yeah that's your face just lit up there there's a lot face just lit up there there's a lot face just lit up there there's a lot yeah it's uh 14 maybe somewh around and yeah it's uh 14 maybe somewh around and yeah it's uh 14 maybe somewh around and uh I sort of blocked it for quite a long uh I sort of blocked it for quite a long uh I sort of blocked it for quite a long time so you had a number maybe eight time so you had a number maybe eight time so you had a number maybe eight nine at the time but the thing is that

  7. nine at the time but the thing is that nine at the time but the thing is that mermaid grows and we all seen the mermaid grows and we all seen the mermaid grows and we all seen the warnings from webpack back in the day if warnings from webpack back in the day if warnings from webpack back in the day if it's larger than to 56k it starts to it's larger than to 56k it starts to it's larger than to 56k it starts to complain and mermaid was already quite complain and mermaid was already quite complain and mermaid was already quite big and uh all the new diagrams take big and uh all the new diagrams take big and uh all the new diagrams take space so it has to be the new right space so it has to be the new right space so it has to be the new right diagrams I figured so we added a few but diagrams I figured so we added a few but diagrams I figured so we added a few but now the first thing we did when when we now the first thing we did when when we now the first thing we did when when we started with with the company around it started with with the company around it started with with the company around it is to make lazy loading of different is to make lazy loading of different is to make lazy loading of different diagram types part of mermaid so then diagram types part of mermaid so then diagram types part of mermaid so then the flood gates can open was the the flood gates can open was the the flood gates can open was the original one that you made was a flow original one that you made was a flow original one that you made was a flow yeah that was flow sh yeah and then I yeah that was flow sh yeah and then I yeah that was flow sh yeah and then I realized okay I really want sequence realized okay I really want sequence realized okay I really want sequence diagrams that's my favorite that's the diagrams that's my favorite that's the diagrams that's my favorite that's the one I like to use personally and so I one I like to use personally and so I one I like to use personally and so I sat the Christmas Vacation filling with sat the Christmas Vacation filling with sat the Christmas Vacation filling with that yeah Secrets diagrams are my that yeah Secrets diagrams are my that yeah Secrets diagrams are my favorite as well uh it feels like favorite as well uh it feels like favorite as well uh it feels like there's some gryb uml Vibes in mermaid there's some gryb uml Vibes in mermaid there's some gryb uml Vibes in mermaid but I come to realize that actually you but I come to realize that actually you but I come to realize that actually you can model anything with them onboarding can model anything with them onboarding can model anything with them onboarding flow process for someone starting at the flow process for someone starting at the flow process for someone starting at the company yes sequence diagrams is great company yes sequence diagrams is great company yes sequence diagrams is great different roles and different steps yeah different roles and different steps yeah different roles and different steps yeah being able to do that so simply that being able to do that so simply that being able to do that so simply that it's really quite extraordinary like uh it's really quite extraordinary like uh it's really quite extraordinary like uh folks of course are hearing this as an folks of course are hearing this as an folks of course are hearing this as an audio podcast but they should check out audio podcast but they should check out audio podcast but they should check out uh you know the GitHub for mermaid and uh you know the GitHub for mermaid and uh you know the GitHub for mermaid and check out the website but like the check out the website but like the check out the website but like the sequence diagram that I'm looking at the sequence diagram that I'm looking at the sequence diagram that I'm looking at the Alice John and Bob you know having a Alice John and Bob you know having a Alice John and Bob you know having a conversation dialogue it's like eight

  8. conversation dialogue it's like eight conversation dialogue it's like eight lines it's really dense with just arrows lines it's really dense with just arrows lines it's really dense with just arrows and hyphens this vir nothing here was it and hyphens this vir nothing here was it and hyphens this vir nothing here was it a goal to be so tur because it's minimal a goal to be so tur because it's minimal a goal to be so tur because it's minimal bites for a very sophisticated bites for a very sophisticated bites for a very sophisticated diagram not really I mean so you don't diagram not really I mean so you don't diagram not really I mean so you don't want it to be too verbos but I really want it to be too verbos but I really want it to be too verbos but I really want it to be readable if you go back to want it to be readable if you go back to want it to be readable if you go back to the markdown thing where you see in the the markdown thing where you see in the the markdown thing where you see in the markdown file you can sort of figure out markdown file you can sort of figure out markdown file you can sort of figure out the styling but you have text but it's the styling but you have text but it's the styling but you have text but it's still readable so you have a hashtag for still readable so you have a hashtag for still readable so you have a hashtag for the type of heading for instance so it's the type of heading for instance so it's the type of heading for instance so it's easy to read but you still get the text easy to read but you still get the text easy to read but you still get the text only I wanted the same for diagrams yeah only I wanted the same for diagrams yeah only I wanted the same for diagrams yeah it feels intuitive like I was staring at it feels intuitive like I was staring at it feels intuitive like I was staring at it trying to figure out without reading it trying to figure out without reading it trying to figure out without reading the docs how am I going to do this and the docs how am I going to do this and the docs how am I going to do this and then I was like oh hyphen that's a line then I was like oh hyphen that's a line then I was like oh hyphen that's a line hyphen hyphen that's a dotted line and hyphen hyphen that's a dotted line and hyphen hyphen that's a dotted line and now I'm starting to get inside the the now I'm starting to get inside the the now I'm starting to get inside the the brain of mermaid and then I'm seeing brain of mermaid and then I'm seeing brain of mermaid and then I'm seeing that intuitive style of using you know that intuitive style of using you know that intuitive style of using you know basically ASI to express these different basically ASI to express these different basically ASI to express these different diagrams and now once I get it I can go diagrams and now once I get it I can go diagrams and now once I get it I can go down to the state diagram or the pie down to the state diagram or the pie down to the state diagram or the pie chart and I'm like okay now I understand chart and I'm like okay now I understand chart and I'm like okay now I understand you know kind of what you're going for you know kind of what you're going for you know kind of what you're going for but then you're doing experimental but then you're doing experimental but then you're doing experimental diagrams I just noticed that the C4 diagrams I just noticed that the C4 diagrams I just noticed that the C4 diagram which is a new kind of diagram which is a new kind of diagram which is a new kind of experimental architecture diagram for experimental architecture diagram for experimental architecture diagram for visualizing software architecture that's visualizing software architecture that's visualizing software architecture that's almost a programming language in its own almost a programming language in its own almost a programming language in its own is is that format your format or is that is is that format your format or is that is is that format your format or is that their format that was a contribution their format that was a contribution their format that was a contribution it's a good format the thing with the it's a good format the thing with the it's a good format the thing with the experimental diagrams is that once

  9. experimental diagrams is that once experimental diagrams is that once something is sort of approved then we something is sort of approved then we something is sort of approved then we can never change it because if we change can never change it because if we change can never change it because if we change it then we break diagrams out in the it then we break diagrams out in the it then we break diagrams out in the world it's one thing to change an API world it's one thing to change an API world it's one thing to change an API and have some developer having to change and have some developer having to change and have some developer having to change something to have the latest version of something to have the latest version of something to have the latest version of mermaid but uh you cannot force I don't mermaid but uh you cannot force I don't mermaid but uh you cannot force I don't know how many people there are actually know how many people there are actually know how many people there are actually writing mermaid diagrams but say 100,000 writing mermaid diagrams but say 100,000 writing mermaid diagrams but say 100,000 or a or a or a million people changing their old million people changing their old million people changing their old diagrams because we wanted to fix syntax diagrams because we wanted to fix syntax diagrams because we wanted to fix syntax so I mean if you look at flow charts so I mean if you look at flow charts so I mean if you look at flow charts there are lots of things I would have there are lots of things I would have there are lots of things I would have done differently but uh done differently but uh done differently but uh we can't change it backwards so it is we can't change it backwards so it is we can't change it backwards so it is what it is and that's why we sort of what it is and that's why we sort of what it is and that's why we sort of call them experimental until we it's call them experimental until we it's call them experimental until we it's like a disclaimer yeah where do you see like a disclaimer yeah where do you see like a disclaimer yeah where do you see mermaid sitting in a world where we also mermaid sitting in a world where we also mermaid sitting in a world where we also have like SVG at the low level like just have like SVG at the low level like just have like SVG at the low level like just drawing boxes and lines manually and drawing boxes and lines manually and drawing boxes and lines manually and then then then d3js which is kind of like observable d3js which is kind of like observable d3js which is kind of like observable bindable I noticed that Mermaid has you bindable I noticed that Mermaid has you bindable I noticed that Mermaid has you know zooming and panning but I was know zooming and panning but I was know zooming and panning but I was curious if I could like drag nodes or curious if I could like drag nodes or curious if I could like drag nodes or move things around and then re serialize move things around and then re serialize move things around and then re serialize backwards into some kind of a two-way backwards into some kind of a two-way backwards into some kind of a two-way data binding yeah actually in the in the data binding yeah actually in the in the data binding yeah actually in the in the mermaid chart now we're talking paid mermaid chart now we're talking paid mermaid chart now we're talking paid feature we have a round trip kind of feature we have a round trip kind of feature we have a round trip kind of thing going on so that you can add nodes thing going on so that you can add nodes thing going on so that you can add nodes via the interface and then when you do via the interface and then when you do via the interface and then when you do that you also update the code so this that you also update the code so this that you also update the code so this way if you have I don't know all project

  10. way if you have I don't know all project way if you have I don't know all project managers must excuse me now but if you managers must excuse me now but if you managers must excuse me now but if you have a project manager that don't like have a project manager that don't like have a project manager that don't like to code they want to use the mouse he or to code they want to use the mouse he or to code they want to use the mouse he or she can do that using the visual editor she can do that using the visual editor she can do that using the visual editor but the code gets updated so someone but the code gets updated so someone but the code gets updated so someone else can continue using his or her else can continue using his or her else can continue using his or her favorite editor as well so it's in favorite editor as well so it's in favorite editor as well so it's in unison that online diagramming like you unison that online diagramming like you unison that online diagramming like you said it works around rather than at the said it works around rather than at the said it works around rather than at the core it sits on top of so like I'm in core it sits on top of so like I'm in core it sits on top of so like I'm in the editor right now and I can go and the editor right now and I can go and the editor right now and I can go and and and it's really cool because it's and and it's really cool because it's and and it's really cool because it's split screen some editors hide stuff split screen some editors hide stuff split screen some editors hide stuff like you mention Vio at the very like you mention Vio at the very like you mention Vio at the very beginning Vio is an opaque binary format beginning Vio is an opaque binary format beginning Vio is an opaque binary format God knows it's probably XML and zip God knows it's probably XML and zip God knows it's probably XML and zip files behind it right it's it's it's files behind it right it's it's it's files behind it right it's it's it's it's a horrible thing but I can make a it's a horrible thing but I can make a it's a horrible thing but I can make a change on the markdown side I can make a change on the markdown side I can make a change on the markdown side I can make a change on the visual side and they're change on the visual side and they're change on the visual side and they're going to stay synchronized at all times going to stay synchronized at all times going to stay synchronized at all times it's not called markdown though like it's not called markdown though like it's not called markdown though like what is this it's a float it's a does it what is this it's a float it's a does it what is this it's a float it's a does it have a word does it have a name we just have a word does it have a name we just have a word does it have a name we just say mermaid syntax should probably make say mermaid syntax should probably make say mermaid syntax should probably make a cool cool word for it yeah I think we a cool cool word for it yeah I think we a cool cool word for it yeah I think we need a cool word for that and then then need a cool word for that and then then need a cool word for that and then then now in the era of AI you're sprinkling now in the era of AI you're sprinkling now in the era of AI you're sprinkling AI on top of it which means there's a AI on top of it which means there's a AI on top of it which means there's a new interface I have a visual interface new interface I have a visual interface new interface I have a visual interface I can have a text interface or I can say I can have a text interface or I can say I can have a text interface or I can say add a node to Bob pointed towards you add a node to Bob pointed towards you add a node to Bob pointed towards you know or create an edge in this direction know or create an edge in this direction know or create an edge in this direction when did you have that idea I when did you have that idea I when did you have that idea I didn't I admit it now about so mermaid didn't I admit it now about so mermaid didn't I admit it now about so mermaid had been around for eight years at the had been around for eight years at the had been around for eight years at the time and then shat GPT happened it

  11. time and then shat GPT happened it time and then shat GPT happened it turned out that shat GPD was quite well turned out that shat GPD was quite well turned out that shat GPD was quite well versed in making mermaid diagrams versed in making mermaid diagrams versed in making mermaid diagrams because there were so many out there so because there were so many out there so because there were so many out there so lot of diagrams to train on then I got lot of diagrams to train on then I got lot of diagrams to train on then I got the idea that okay we could actually do the idea that okay we could actually do the idea that okay we could actually do it inside our own own editor as well but it inside our own own editor as well but it inside our own own editor as well but someone else made it first out in using someone else made it first out in using someone else made it first out in using chat GPT some videos about it that's chat GPT some videos about it that's chat GPT some videos about it that's cool the visualization is an active cool the visualization is an active cool the visualization is an active visualization it's you can zoom in you visualization it's you can zoom in you visualization it's you can zoom in you can zoom out it's dynamically expressed can zoom out it's dynamically expressed can zoom out it's dynamically expressed um I could imagine 10 years ago there um I could imagine 10 years ago there um I could imagine 10 years ago there would be a time when it might have been would be a time when it might have been would be a time when it might have been server side and it could have generated server side and it could have generated server side and it could have generated images is there an ability to do that as images is there an ability to do that as images is there an ability to do that as well if I were going to generate a book well if I were going to generate a book well if I were going to generate a book and I wanted to render a PDF and I and I wanted to render a PDF and I and I wanted to render a PDF and I wanted all of my charts to be in mermaid wanted all of my charts to be in mermaid wanted all of my charts to be in mermaid how would I do that yeah I actually how would I do that yeah I actually how would I do that yeah I actually wrote the book about mermaid me wrote the book about mermaid me wrote the book about mermaid me personally I did it using mermaid of personally I did it using mermaid of personally I did it using mermaid of course I did it using the browser and course I did it using the browser and course I did it using the browser and just having a script saving down all the just having a script saving down all the just having a script saving down all the the mermaid files yeah so that's one way the mermaid files yeah so that's one way the mermaid files yeah so that's one way of doing it you can't do it right now of doing it you can't do it right now of doing it you can't do it right now now on the serice side strictly there's now on the serice side strictly there's now on the serice side strictly there's a mermaid CLI part of the open source a mermaid CLI part of the open source a mermaid CLI part of the open source but that use Puppeteer under the hood so but that use Puppeteer under the hood so but that use Puppeteer under the hood so that's probably the best way of doing it that's probably the best way of doing it that's probably the best way of doing it what you just said so the book though what you just said so the book though what you just said so the book though the official guide to mermaid Js from the official guide to mermaid Js from the official guide to mermaid Js from mermaid press you can get it on Amazon mermaid press you can get it on Amazon mermaid press you can get it on Amazon you buy it anywhere you wrote that with you buy it anywhere you wrote that with you buy it anywhere you wrote that with mermaid is it in markdown and mermaid mermaid is it in markdown and mermaid mermaid is it in markdown and mermaid and then how did did you render it with and then how did did you render it with and then how did did you render it with the CLI or it was really I wouldn't say the CLI or it was really I wouldn't say the CLI or it was really I wouldn't say frustrating but uh it debit we wrote it frustrating but uh it debit we wrote it frustrating but uh it debit we wrote it in in Google Docs actually a did that

  12. in in Google Docs actually a did that in in Google Docs actually a did that was that frustrating did you have this was that frustrating did you have this was that frustrating did you have this magical idea that we're going to write magical idea that we're going to write magical idea that we're going to write the whole book entirely in mermaid yeah the whole book entirely in mermaid yeah the whole book entirely in mermaid yeah I wanted that in marktown and mermaid in I wanted that in marktown and mermaid in I wanted that in marktown and mermaid in it but uh there a lot of back and forth it but uh there a lot of back and forth it but uh there a lot of back and forth with a publisher and they were not tech with a publisher and they were not tech with a publisher and they were not tech people so sometimes you have to yield people so sometimes you have to yield people so sometimes you have to yield because you're not alone you have to because you're not alone you have to because you're not alone you have to work with someone and find the best work with someone and find the best work with someone and find the best solution that fits the whole I love solution that fits the whole I love solution that fits the whole I love though that it's 2024 and when we want though that it's 2024 and when we want though that it's 2024 and when we want to get real work done we got to open VI to get real work done we got to open VI to get real work done we got to open VI or emac or whatever and it's all about or emac or whatever and it's all about or emac or whatever and it's all about tech you know we're in a world with gpus tech you know we're in a world with gpus tech you know we're in a world with gpus and threedimensional this and that and and threedimensional this and that and and threedimensional this and that and VR but like okay it's time for work VR but like okay it's time for work VR but like okay it's time for work let's write some text yeah definitely let's write some text yeah definitely let's write some text yeah definitely has that been challenging as the CTO to has that been challenging as the CTO to has that been challenging as the CTO to like set the direction for how you want like set the direction for how you want like set the direction for how you want the company to go because they might the company to go because they might the company to go because they might want to introduce something that's want to introduce something that's want to introduce something that's against the philosophy of mermaid but against the philosophy of mermaid but against the philosophy of mermaid but you've been pretty consistent in your you've been pretty consistent in your you've been pretty consistent in your philosophy for 10 years yeah not really philosophy for 10 years yeah not really philosophy for 10 years yeah not really because uh we're sort of we in in Step because uh we're sort of we in in Step because uh we're sort of we in in Step so far at least not everyone but so far at least not everyone but so far at least not everyone but something that has happened as a result something that has happened as a result something that has happened as a result of the chat GPT Revolution if you will of the chat GPT Revolution if you will of the chat GPT Revolution if you will is that a lot of more people has been is that a lot of more people has been is that a lot of more people has been introduced to Mermaid so they can start introduced to Mermaid so they can start introduced to Mermaid so they can start with with chat GPT and just show me a with with chat GPT and just show me a with with chat GPT and just show me a process on how to buy real estate or process on how to buy real estate or process on how to buy real estate or whatnot can be anything and then they whatnot can be anything and then they whatnot can be anything and then they end up at mermaid chart and they are not end up at mermaid chart and they are not end up at mermaid chart and they are not developers they are real estate agents developers they are real estate agents developers they are real estate agents or business people or whoever they might or business people or whoever they might or business people or whoever they might not always like coding so that's a

  13. not always like coding so that's a not always like coding so that's a little bit different from when I did little bit different from when I did little bit different from when I did this for developers by me then and this for developers by me then and this for developers by me then and everyone does not fit in the same mold everyone does not fit in the same mold everyone does not fit in the same mold so that's part of the reason why we have so that's part of the reason why we have so that's part of the reason why we have a visual editor now so that they also a visual editor now so that they also a visual editor now so that they also can express themselves using our product can express themselves using our product can express themselves using our product it's interesting I'm a code guy I really it's interesting I'm a code guy I really it's interesting I'm a code guy I really like as you say text code I've been like as you say text code I've been like as you say text code I've been developing computer software since I was developing computer software since I was developing computer software since I was uh pre at that time it was called a home uh pre at that time it was called a home uh pre at that time it was called a home computer anyway so I really like to code computer anyway so I really like to code computer anyway so I really like to code but even then sometimes I use the visual but even then sometimes I use the visual but even then sometimes I use the visual editor and sometime I use the text if I editor and sometime I use the text if I editor and sometime I use the text if I want to do more than just change a title want to do more than just change a title want to do more than just change a title then I usually go to the left side using then I usually go to the left side using then I usually go to the left side using text otherwise if I just want to change text otherwise if I just want to change text otherwise if I just want to change title on the box then I can double click title on the box then I can double click title on the box then I can double click and be done with it is this where you and be done with it is this where you and be done with it is this where you thought you would be how did you decide thought you would be how did you decide thought you would be how did you decide that this was the journey and the that this was the journey and the that this was the journey and the direction to take you could have said no direction to take you could have said no direction to take you could have said no you know open core Ventures and the open you know open core Ventures and the open you know open core Ventures and the open core software philosophy is one based on core software philosophy is one based on core software philosophy is one based on building companies on top of Open Source building companies on top of Open Source building companies on top of Open Source but you're European you're Scandinavian but you're European you're Scandinavian but you're European you're Scandinavian you're in a world where not just OSS but you're in a world where not just OSS but you're in a world where not just OSS but F OSS Foss is very popular H how did you F OSS Foss is very popular H how did you F OSS Foss is very popular H how did you make those kind of decisions say yeah I make those kind of decisions say yeah I make those kind of decisions say yeah I think I'll I'll see if we can make a think I'll I'll see if we can make a think I'll I'll see if we can make a company about this versus saying no I company about this versus saying no I company about this versus saying no I want it to be free and and maybe even a want it to be free and and maybe even a want it to be free and and maybe even a GPL GPL GPL license I think that that was quite an license I think that that was quite an license I think that that was quite an easy decision because uh as I mentioned easy decision because uh as I mentioned easy decision because uh as I mentioned I'm very passionate about mermaid and I I'm very passionate about mermaid and I I'm very passionate about mermaid and I think to make it thrive in the long run

  14. think to make it thrive in the long run think to make it thrive in the long run it's good to have proper backing so that it's good to have proper backing so that it's good to have proper backing so that was one of my concerns when I had my was one of my concerns when I had my was one of my concerns when I had my downward slope when I was almost burned downward slope when I was almost burned downward slope when I was almost burned out to what will happen with mermaid if out to what will happen with mermaid if out to what will happen with mermaid if I I I I I I quit and uh in any company it's not just quit and uh in any company it's not just quit and uh in any company it's not just one person I'm not saying that but even one person I'm not saying that but even one person I'm not saying that but even if I quit and someone else came in that if I quit and someone else came in that if I quit and someone else came in that person will also eventually get burned person will also eventually get burned person will also eventually get burned out so having backing of a full team out so having backing of a full team out so having backing of a full team that's the best thing that can happen that's the best thing that can happen that's the best thing that can happen for mermaid I think so I did not at that for mermaid I think so I did not at that for mermaid I think so I did not at that point not now either see any point not now either see any point not now either see any contradiction with promoting mermaid and contradiction with promoting mermaid and contradiction with promoting mermaid and starting the company would you recommend starting the company would you recommend starting the company would you recommend this open core concept to others like is this open core concept to others like is this open core concept to others like is this the ideal scenario because we're in this the ideal scenario because we're in this the ideal scenario because we're in a time right now you know in my day job a time right now you know in my day job a time right now you know in my day job I work for Microsoft and I work with the I work for Microsoft and I work with the I work for Microsoft and I work with the open source programs office like what is open source programs office like what is open source programs office like what is the role of giant company Google the role of giant company Google the role of giant company Google Microsoft Apple Netflix what is the goal Microsoft Apple Netflix what is the goal Microsoft Apple Netflix what is the goal of midsized or you know startup company of midsized or you know startup company of midsized or you know startup company like your own and then all of this like your own and then all of this like your own and then all of this volunteer work you know like all of your volunteer work you know like all of your volunteer work you know like all of your work for years and years and years was work for years and years and years was work for years and years and years was just you with your child on your knee just you with your child on your knee just you with your child on your knee asleep while you code what is the role asleep while you code what is the role asleep while you code what is the role of giant company and big money in a time of giant company and big money in a time of giant company and big money in a time of Open Source and how do you find that of Open Source and how do you find that of Open Source and how do you find that balance I think we are going to see a balance I think we are going to see a balance I think we are going to see a sort of du a license model sort of du a license model sort of du a license model eventually because uh there is that eventually because uh there is that eventually because uh there is that point that the large companies should point that the large companies should point that the large companies should give back to the community you have one give back to the community you have one give back to the community you have one idealistic person really really working

  15. idealistic person really really working idealistic person really really working hard and doing it for others but that hard and doing it for others but that hard and doing it for others but that others are probably not a multi-million others are probably not a multi-million others are probably not a multi-million dollar company that just makes it to dollar company that just makes it to dollar company that just makes it to earn money and that's what company does earn money and that's what company does earn money and that's what company does that's what merid chart will do as well that's what merid chart will do as well that's what merid chart will do as well of course but uh to have a model that is of course but uh to have a model that is of course but uh to have a model that is more more fair and funnels back better more more fair and funnels back better more more fair and funnels back better that's important in the long run I think that's important in the long run I think that's important in the long run I think yeah I I think it is challenging like yeah I I think it is challenging like yeah I I think it is challenging like people want Microsoft or Google to just people want Microsoft or Google to just people want Microsoft or Google to just basically pay up is should they pay up basically pay up is should they pay up basically pay up is should they pay up in the form of licenses and then if the in the form of licenses and then if the in the form of licenses and then if the open source project doesn't have an open source project doesn't have an open source project doesn't have an organization behind it whether it be a organization behind it whether it be a organization behind it whether it be a company or a nonprofit or something to company or a nonprofit or something to company or a nonprofit or something to collect the money then you're just you collect the money then you're just you collect the money then you're just you know giving a random person some money know giving a random person some money know giving a random person some money uh or maybe you're giving them Cloud uh or maybe you're giving them Cloud uh or maybe you're giving them Cloud credits that's not going to be credits that's not going to be credits that's not going to be sustainable and I think the it sounds to sustainable and I think the it sounds to sustainable and I think the it sounds to me I'm hearing sustainability when me I'm hearing sustainability when me I'm hearing sustainability when you're describing your story about why you're describing your story about why you're describing your story about why you made the decision and why open core you made the decision and why open core you made the decision and why open core was right for you and your product and was right for you and your product and was right for you and your product and your company sustainability is like the your company sustainability is like the your company sustainability is like the Hallmark of what you're describing and Hallmark of what you're describing and Hallmark of what you're describing and throwing money at the problem is throwing money at the problem is throwing money at the problem is different than different than different than sustainability and I think big companies sustainability and I think big companies sustainability and I think big companies need to decide how they're going to do need to decide how they're going to do need to decide how they're going to do that my own company uh Microsoft and that my own company uh Microsoft and that my own company uh Microsoft and others need to figure that out and soon others need to figure that out and soon others need to figure that out and soon yeah good point yeah I agree so you're yeah good point yeah I agree so you're yeah good point yeah I agree so you're in a situation now where you've got 20 in a situation now where you've got 20 in a situation now where you've got 20 million plus visitors the company's million plus visitors the company's million plus visitors the company's popular it looks like just a couple of popular it looks like just a couple of popular it looks like just a couple of weeks ago you you did raise uh some weeks ago you you did raise uh some weeks ago you you did raise uh some money a seed round congratulations from money a seed round congratulations from money a seed round congratulations from uh open core Ventures can you give me a

  16. uh open core Ventures can you give me a uh open core Ventures can you give me a hint about any cool mermaid features I'm hint about any cool mermaid features I'm hint about any cool mermaid features I'm going to want to watch for what's what going to want to watch for what's what going to want to watch for what's what are you working on because you're still are you working on because you're still are you working on because you're still coding every day I'm sure yeah what fun coding every day I'm sure yeah what fun coding every day I'm sure yeah what fun feature should I look forward to in the feature should I look forward to in the feature should I look forward to in the next versions of mermaid yeah we are are next versions of mermaid yeah we are are next versions of mermaid yeah we are are looking at the visual editor it's right looking at the visual editor it's right looking at the visual editor it's right now it's only supporting a few diagrams now it's only supporting a few diagrams now it's only supporting a few diagrams so we want to make that one better and so we want to make that one better and so we want to make that one better and cover all the diagrams and then we are cover all the diagrams and then we are cover all the diagrams and then we are going to add more diagrams into Mermaid going to add more diagrams into Mermaid going to add more diagrams into Mermaid as well that's cool yeah and here's the as well that's cool yeah and here's the as well that's cool yeah and here's the symbiosis between mermaid and mermaid symbiosis between mermaid and mermaid symbiosis between mermaid and mermaid chart if you will if we add that to chart if you will if we add that to chart if you will if we add that to mermaid that will benefit mermaid charts mermaid that will benefit mermaid charts mermaid that will benefit mermaid charts customers so that's a win-win cool okay customers so that's a win-win cool okay customers so that's a win-win cool okay so a new chart shows up I can be an open so a new chart shows up I can be an open so a new chart shows up I can be an open source user and I'll get the benefit of source user and I'll get the benefit of source user and I'll get the benefit of being able to write that in mermaid being able to write that in mermaid being able to write that in mermaid syntax and then the visual editor the syntax and then the visual editor the syntax and then the visual editor the person who has a pro license will then person who has a pro license will then person who has a pro license will then get the visual editor and the ability to get the visual editor and the ability to get the visual editor and the ability to have that in an interactive guey so have that in an interactive guey so have that in an interactive guey so everybody wins yeah that's the plan everybody wins yeah that's the plan everybody wins yeah that's the plan that's cool sounds like a good that's cool sounds like a good that's cool sounds like a good plan good good uh we have more more plan good good uh we have more more plan good good uh we have more more stuff Brewing I mean the AI we just stuff Brewing I mean the AI we just stuff Brewing I mean the AI we just scratch the surface there want to build scratch the surface there want to build scratch the surface there want to build it in more more fastet in the product it in more more fastet in the product it in more more fastet in the product and improve it very cool all right well and improve it very cool all right well and improve it very cool all right well I really appreciate you taking the time I really appreciate you taking the time I really appreciate you taking the time to chat with me today thank you thanks to chat with me today thank you thanks to chat with me today thank you thanks for having me yeah so you can check out for having me yeah so you can check out for having me yeah so you can check out mermaid at mermaid.jpg diagramming with chat GPT mermaid.jpg diagramming with chat GPT today we have been chatting with canut today we have been chatting with canut today we have been chatting with canut fiist the CTO of mermaid chart and this fiist the CTO of mermaid chart and this fiist the CTO of mermaid chart and this has been another episode of Hansel

  17. has been another episode of Hansel has been another episode of Hansel minutes and we'll see you again next minutes and we'll see you again next minutes and we'll see you again next week week week [Music]

Summary

The discussion centers on how an open-source project, Mermaid diagramming, evolved into a successful company, Mermaid Chart. The speaker, CTO of Mermaid Chart, shares how a personal need for better diagramming tools, inspired by the text-based nature of Markdown and the name "The Little Mermaid," led to the project's creation. The takeaway is that solving a genuine problem can lead to unexpected growth, and giving back to the open-source community is a valuable principle.

View original episode ↗