{"id":3371,"date":"2022-09-19T18:02:12","date_gmt":"2022-09-19T13:02:12","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3371"},"modified":"2022-09-19T18:02:14","modified_gmt":"2022-09-19T13:02:14","slug":"mermaid-live-editor-guide-for-beginners","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/mermaid-live-editor-guide-for-beginners\/","title":{"rendered":"Mermaid Live Editor | Guide for Beginners"},"content":{"rendered":"\n<p><strong>Mermaid Live Editor<\/strong> is an online tool that allows us to <strong>create, edit, preview, and share Mermaid diagrams\/charts<\/strong>. It is a live editor, so you will see the output in real-time. <strong>Mermaid Live Editor<\/strong> is an open-source tool that makes it completely <strong>free to use<\/strong> for personal or commercial projects.<\/p>\n\n\n\n<p>Basically, Mermaid Editor was created to help you quickly draw flowcharts and Gantt charts.<\/p>\n\n\n\n<p>There are many platforms and tools that support <strong>Mermaid<\/strong> out of the box. Most of them either have native support for Mermaid or allow integration by means of plugins, extensions, etc. They are great in their respective use cases, but if you are looking for a <strong>free online Mermaid diagram editor<\/strong> to quickly render and save a Mermaid diagram, the <strong>Mermaid Live Editor<\/strong> will be the preferred choice.<\/p>\n\n\n\n<p>Today, I&#8217;ll teach you about the different features of this editor and how to use them.<\/p>\n\n\n\n<p>After reading this guide, you will be ready to start creating diagrams in <strong>Mermaid Live Editor<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Mermaid Live Editor Features<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Edit and preview Gantt charts, flowcharts, and sequence diagrams in real time.<\/li><li>Save the result in SVG format.<\/li><li>Get a link to a viewer of the diagram so that you can share it with others.<\/li><li>Get a link to edit the diagram so that someone else can tweak it and send a new link back<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Docker<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/mermaid-js\/mermaid-live-editor#run-published-image\"><\/a>Run published image<\/h3>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;shell&quot;,&quot;mime&quot;:&quot;text\/x-sh&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;Shell&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;shell&quot;}\">docker run --publish 8000:80 ghcr.io\/mermaid-js\/mermaid-live-editor<\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/mermaid-js\/mermaid-live-editor#to-configure-renderer-url\"><\/a>To configure renderer URL<\/h3>\n\n\n\n<p>When building, Set the Environment variable MERMAID_RENDERER_URL to the rendering service. Default is&nbsp;<code>https:\/\/mermaid.ink<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/mermaid-js\/mermaid-live-editor#to-configure-kroki-instance-url\"><\/a>To configure Kroki Instance URL<\/h3>\n\n\n\n<p>When building, Set the Environment variable MERMAID_KROKI_RENDERER_URL to your Kroki instance. Default is&nbsp;<code>https:\/\/kroki.io<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/mermaid-js\/mermaid-live-editor#development\"><\/a>Development<\/h3>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;shell&quot;,&quot;mime&quot;:&quot;text\/x-sh&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;Shell&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;shell&quot;}\">docker compose up --build<\/pre><\/div>\n\n\n\n<p>Then open\u00a0<strong>http:\/\/localhost:8000<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/mermaid-js\/mermaid-live-editor#setup\"><\/a>Setup<\/h2>\n\n\n\n<p>Volta\u00a0is used for managing node and yarn versions.<\/p>\n\n\n\n<p>This project is set up using\u00a0Yarn:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;shell&quot;,&quot;mime&quot;:&quot;text\/x-sh&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;Shell&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;shell&quot;}\">yarn install<\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/mermaid-js\/mermaid-live-editor#development-1\"><\/a>Development<\/h2>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;shell&quot;,&quot;mime&quot;:&quot;text\/x-sh&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;Shell&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;shell&quot;}\">yarn dev -- --open<\/pre><\/div>\n\n\n\n<p>This app is created with Svelte Kit.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/mermaid-js\/mermaid-live-editor#release\"><\/a>Release<\/h2>\n\n\n\n<p>When a PR is created targeting master, it will be built and deployed by Netlify. The URL will be indicated in a Comment in the PR.<\/p>\n\n\n\n<p>Once the PR is merged, it will automatically be released.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mermaid Live Editor is an online tool that allows us to create, edit, preview, and share Mermaid diagrams\/charts. It is a live editor, so you will see the output in real-time. Mermaid Live Editor is an open-source tool that makes it completely free to use for personal or commercial projects. Basically, Mermaid Editor was created &#8230; <a title=\"Mermaid Live Editor | Guide for Beginners\" class=\"read-more\" href=\"https:\/\/www.edopedia.com\/blog\/mermaid-live-editor-guide-for-beginners\/\" aria-label=\"Read more about Mermaid Live Editor | Guide for Beginners\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3373,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[115],"tags":[],"class_list":["post-3371","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guides"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mermaid Live Editor | Guide for Beginners<\/title>\n<meta name=\"description\" content=\"Mermaid Live Editor is an online tool that allows us to create, edit, preview, and share Mermaid diagrams\/charts. It is a live editor, so you will see the\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/mermaid-live-editor-guide-for-beginners\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Live Editor | Guide for Beginners\" \/>\n<meta property=\"og:description\" content=\"Mermaid Live Editor is an online tool that allows us to create, edit, preview, and share Mermaid diagrams\/charts. It is a live editor, so you will see the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/mermaid-live-editor-guide-for-beginners\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-19T13:02:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T13:02:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/Mermaid_Live_Editor.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"495\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mermaid Live Editor | Guide for Beginners","description":"Mermaid Live Editor is an online tool that allows us to create, edit, preview, and share Mermaid diagrams\/charts. It is a live editor, so you will see the","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/mermaid-live-editor-guide-for-beginners\/","og_locale":"en_US","og_type":"article","og_title":"Mermaid Live Editor | Guide for Beginners","og_description":"Mermaid Live Editor is an online tool that allows us to create, edit, preview, and share Mermaid diagrams\/charts. It is a live editor, so you will see the","og_url":"https:\/\/www.edopedia.com\/blog\/mermaid-live-editor-guide-for-beginners\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-09-19T13:02:12+00:00","article_modified_time":"2022-09-19T13:02:14+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/Mermaid_Live_Editor.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/mermaid-live-editor-guide-for-beginners\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/mermaid-live-editor-guide-for-beginners\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"Mermaid Live Editor | Guide for Beginners","datePublished":"2022-09-19T13:02:12+00:00","dateModified":"2022-09-19T13:02:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/mermaid-live-editor-guide-for-beginners\/"},"wordCount":343,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/mermaid-live-editor-guide-for-beginners\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/Mermaid_Live_Editor.jpg","articleSection":["Guides"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/mermaid-live-editor-guide-for-beginners\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/mermaid-live-editor-guide-for-beginners\/","url":"https:\/\/www.edopedia.com\/blog\/mermaid-live-editor-guide-for-beginners\/","name":"Mermaid Live Editor | Guide for Beginners","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/mermaid-live-editor-guide-for-beginners\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/mermaid-live-editor-guide-for-beginners\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/Mermaid_Live_Editor.jpg","datePublished":"2022-09-19T13:02:12+00:00","dateModified":"2022-09-19T13:02:14+00:00","description":"Mermaid Live Editor is an online tool that allows us to create, edit, preview, and share Mermaid diagrams\/charts. It is a live editor, so you will see the","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/mermaid-live-editor-guide-for-beginners\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/mermaid-live-editor-guide-for-beginners\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/mermaid-live-editor-guide-for-beginners\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/Mermaid_Live_Editor.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/Mermaid_Live_Editor.jpg","width":880,"height":495,"caption":"Mermaid Live Editor"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/mermaid-live-editor-guide-for-beginners\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mermaid Live Editor | Guide for Beginners"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3371"}],"version-history":[{"count":3,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3371\/revisions"}],"predecessor-version":[{"id":3375,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3371\/revisions\/3375"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/3373"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}