https://www.mermaidonline.live/_next/static/chunks/1529.b5df53036bc99693.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1529],{31529:e=>{e.exports=JSON.parse('{"template":"shipany-template-one","theme":"light","meta":{"title":"Mermaid Online - Create Diagrams with Text | Online Mermaid Editor","description":"Create flowcharts, sequence diagrams, and system architectures using Mermaid.js syntax. Free online Mermaid editor with live preview and export options.","keywords":"Mermaid, diagram editor, flowchart, sequence diagram, system architecture, documentation, text to diagram, Mermaid.js"},"header":{"brand":{"title":"Mermaid Online","logo":{"src":"/favicon.svg","alt":"Mermaid Online"},"url":"/"},"nav":{"items":[{"title":"Diagram Editor","url":"/editor","icon":"RiCodeLine"},{"title":"Diagram Agent","url":"/ai-diagram-generator","icon":"RiChatBubbleLine"},{"title":"Pricing","url":"/pricing","icon":"RiSparkling2Line"},{"title":"Use Cases","url":"/usecase","icon":"RiLayoutGridLine"}]},"buttons":[],"show_sign":true,"show_theme":false,"show_locale":true},"hero":{"title":"Create Beautiful Mermaid Online Diagrams from Text","highlight_text":"Beautiful Diagrams","description":"Transform ideas into visual diagrams using simple Mermaid syntax.<br/>Perfect for documentation, system design, and workflow visualization.","announcement":{"label":"NEW","title":"\uD83C\uDFA8 Live preview with instant rendering","url":"/#feature"},"tip":"\uD83D\uDCA1 No design skills required","show_happy_users":true,"show_badge":false},"editor":{"tabs":[{"tab_name":"Flowchart","tab_title":"Create Flowchart","placeholder":"Write your Mermaid flowchart syntax here...","template":"flowchart TD\\n    A[Start] --\x3e B{Decision}\\n    B --\x3e|Yes| C[Action 1]\\n    B --\x3e|No| D[Action 2]\\n    C --\x3e E[End]\\n    D --\x3e E"},{"tab_name":"Sequence","tab_title":"Create Sequence Diagram","placeholder":"Write your Mermaid sequence diagram syntax here...","template":"sequenceDiagram\\n    participant A as Client\\n    participant B as Server\\n    A->>B: Request\\n    B->>A: Response"}],"state":{"rendering":"Rendering diagram...","error":"Syntax error in diagram","ready":"Diagram ready","export":"Exporting..."},"actions":{"export_png":"Export as PNG","export_svg":"Export as SVG","copy_code":"Copy Mermaid Code","new_diagram":"New Diagram","load_example":"Load Example"}},"introduce":{"name":"introduce","title":"What is Mermaid Online","label":"Introduce","description":"Mermaid Online is a powerful web-based editor for creating diagrams and charts using Mermaid.js syntax. Transform complex ideas into clear visual diagrams with simple text.","image":{"src":"/imgs/features/mermaid-editor.png","alt":"Illustration of a person creating diagrams on a computer using Mermaid syntax"},"items":[{"title":"Live Preview","description":"See your diagrams render in real-time as you type Mermaid syntax.","icon":"RiEyeLine"},{"title":"Multiple Formats","description":"Support for flowcharts, sequence diagrams, class diagrams, and more.","icon":"RiNodeTree"},{"title":"Export Options","description":"Export your diagrams as PNG, SVG, or copy the Mermaid code.","icon":"RiDownloadLine"}]},"benefit":{"name":"benefit","title":"Why Choose Mermaid Online","label":"Benefits","description":"Create professional diagrams faster than ever with our intuitive Mermaid editor designed for developers and documentation teams.","items":[{"title":"Documentation Made Easy","description":"Keep your documentation visual and up-to-date with diagrams that live alongside your code.","icon":"RiBookLine","image":{"src":"/imgs/features/mermaid-flow.png","alt":"Illustration showing documentation with integrated diagrams"}},{"title":"System Architecture","description":"Visualize complex system architectures and microservices with clear, maintainable diagrams.","icon":"RiServerLine","image":{"src":"/imgs/features/mermaid-flow.png","alt":"System architecture diagram with connected components"}},{"title":"Workflow Visualization","description":"Map out business processes, user journeys, and development workflows clearly.","icon":"RiFlowChart","image":{"src":"/imgs/features/mermaid-flow.png","alt":"Workflow diagram showing process steps and decisions"}}]},"usage":{"name":"usage","title":"How to Use Mermaid Online","description":"Create professional diagrams in three simple steps:","image":{"src":"/imgs/diagram/flowchart-diagram.png","alt":"Mermaid Online editor workflow diagram"},"image_position":"left","text_align":"center","items":[{"title":"Write Mermaid Syntax","de

1scription":"Type your diagram using simple Mermaid syntax. Choose from templates or start from scratch.","image":{"src":"/imgs/diagram/flowchart-diagram.png","alt":"Mermaid syntax editor interface"}},{"title":"Live Preview","description":"Watch your diagram render in real-time as you type. See instant feedback and syntax validation.","image":{"src":"/imgs/diagram/flowchart-diagram.png","alt":"Live preview of Mermaid diagram rendering"}},{"title":"Export & Share","description":"Export your finished diagram as PNG, SVG, or copy the Mermaid code for use in documentation.","image":{"src":"/imgs/diagram/flowchart-diagram.png","alt":"Export options for Mermaid diagrams"}}]},"feature":{"name":"feature","title":"Key Features of Mermaid Online","description":"Everything you need to create beautiful diagrams from text with ease and speed.","items":[{"title":"Real-time Rendering","description":"See your diagrams update instantly as you type with our live preview feature.","icon":"RiEyeLine"},{"title":"Multiple Diagram Types","description":"Support for flowcharts, sequence diagrams, class diagrams, gantt charts, and more.","icon":"RiNodeTree"},{"title":"Export Options","description":"Export diagrams as high-quality PNG, scalable SVG, or copy Mermaid code.","icon":"RiDownloadLine"},{"title":"Template Library","description":"Start quickly with pre-built templates for common diagram patterns and use cases.","icon":"RiLayoutGridLine"}]},"faq":{"name":"faq","label":"FAQ","title":"Frequently Asked Questions About Mermaid Online","description":"Have another question? Check our documentation or contact us.","items":[{"title":"What is Mermaid syntax?","description":"Mermaid is a markdown-inspired syntax for creating diagrams and charts. It allows you to create complex visualizations using simple text commands, making it perfect for documentation and version control."},{"title":"What types of diagrams can I create?","description":"You can create flowcharts, sequence diagrams, class diagrams, state diagrams, entity relationship diagrams, user journey maps, gantt charts, and more. Each type has its own specific syntax."},{"title":"Can I use this for commercial projects?","description":"Yes! Mermaid Online is free to use for both personal and commercial projects. The generated diagrams can be exported and used in any documentation, presentations, or applications."},{"title":"How do I integrate diagrams into my documentation?","description":"You can copy the Mermaid code and paste it directly into GitHub, GitLab, or any documentation tool that supports Mermaid rendering. You can also export as images for other platforms."}]},"cta":{"name":"cta","title":"Start Creating Diagrams Today","description":"Transform your ideas into beautiful visual diagrams with Mermaid Online.","buttons":[{"title":"Launch Editor","url":"/editor","target":"_self","icon":"RiEditLine"}]},"footer":{"name":"footer","brand":{"title":"Mermaid Online","description":"Create beautiful diagrams from text using Mermaid.js syntax. Perfect for documentation, system design, and workflow visualization.","logo":{"src":"/favicon.svg","alt":"Mermaid Online"},"url":"/"},"copyright":"\xa9 2026 • Mermaid Online All rights reserved.","nav":{"items":[{"title":"Mermaid AI","children":[{"title":"Text to Mermaid","url":"/mermaid-ai","target":"_self"},{"title":"AI MindMap Generator","url":"/ai-mindmap-generator","target":"_self"},{"title":"AI Architecture Generator","url":"/ai-architecture-diagram-generator","target":"_self"},{"title":"AI Block Generator","url":"/ai-block-diagram-generator","target":"_self"},{"title":"AI C4 Generator","url":"/ai-c4-diagram-generator","target":"_self"},{"title":"AI Class Generator","url":"/ai-class-diagram-generator","target":"_self"},{"title":"AI Entity Relationship Generator","url":"/ai-entity-relationship-generator","target":"_self"},{"title":"AI flowchart Generator","url":"/ai-flowchart-generator","target":"_self"},{"title":"AI Gantt Generator","url":"/ai-gantt-generator","target":"_self"},{"title":"AI Packet Diagram Generator","url":"/ai-packet-diagram-generator","target":"_self"},{"title":"AI pie Generator","url":"/ai-pie-generator","target":"_self"},{"title":"AI sankey Diagram Generator","url":"/ai-sankey-diagram-generator","target":"_self"},{"title":"AI Sequence Generator","url":"/ai-sequence-generator","target":"_self"},{"title":"AI State Generator","url":"/ai-state-diagram-generator","target":"_self"},{"title":"AI Timeline Generator","url":"/ai-timeline-generator","target":"_self"},{"title":"AI User Journey Generator","url":"/ai-user-journey-generator","target":"_self"},{"title":"AI XY Chart Generator","url":"/ai-xychart-generator","target":"_self"}]},{"title":"Product","children":[{"title":"Mermaid to Image","url":"/mermaid-to-image","target":"_self"},{"title":"Mermaid to Png","url":"/mermaid-to-png","target":"_self"},{"title":"Mermaid to Jpg","url":"/mermaid-to-jpg","target":"_self"},{"title":"Mermaid to SVG","url":"/mermaid-to-svg","target":"_self"},{"title":"Mermaid to PDF","url":"/mermaid-to-pdf","target":"_self"},{"title":"Mermaid to JPEG","url":"/mermaid-to-jpeg","target":"_self"},{"title":"Mermaid to WebP","url":"/mermaid-to-webp","target":"_self"},{"title":"Image to Mermaid Diagram","url":"/image-to-mermaid","target":"_self"},{"title":"PNG to Mermaid Diagram","url":"/png-to-mermaid","target":"_self"},{"title":"JPG to Mermaid Diagram","url":"/jpg-to-mermaid","target":"_self"}]},{"title":"Templates","children":[{"title":"All Templates","url":"/templates","target":"_self"},{"title":"Flowchart","url":"/flowchart","target":"_self"},{"title":"Sequence Diagram","url":"/sequence","target":"_self"},{"title":"Class Diagram","url":"/class","target":"_self"},{"title":"State Diagram","url":"/state","target":"_self"},{"title":"ER Diagram","url":"/entity-relationship","target":"_self"},{"title":"Gantt Chart","url":"/gantt","target":"_self"},{"title":"User Journey","url":"/user-journey","target":"_self"},{"title":"Pie Chart","url":"/pie","target":"_self"},{"title":"Git Graph","url":"/gitgraph","target":"_self"},{"title":"Mind Map","url":"/mindmap","target":"_self"},{"title":"Timeline","url":"/timeline","target":"_self"},{"title":"Quadrant Chart","url":"/quadrant-chart","target":"_self"},{"title":"Requirement Diagram","url":"/requirement","target":"_self"},{"title":"C4 Diagram","url":"/c4","target":"_self"},{"title":"Sankey Diagram","url":"/sankey","target":"_self"},{"title":"XY Chart","url":"/xy-chart","target":"_self"},{"title":"Block Diagram","url":"/block","target":"_self"},{"title":"Packet Diagram","url":"/packet","target":"_self"},{"title":"Architecture Diagram","url":"/architecture","target":"_self"}]},{"title":"Resources","children":[{"title":"Mermaid Tutorials","url":"/mermaid-tutorials","target":"_self"},{"title":"Use Cases","url":"/usecase","target":"_self"}]}]},"social":{"items":[{"title":"Email","icon":"RiMailLine","url":"mailto:[email protected]","target":"_self","description":"[email protected]"},{"title":"GitHub","icon":"RiGithubLine","url":"https://github.com/mermaid-js/mermaid","target":"_blank","description":"Mermaid.js Repository"}]},"agreement":{"items":[{"title":"Privacy Policy","url":"/privacy-policy"},{"title":"Terms of Service","url":"/terms-of-service"}]}}}')}}]);