Frequently Asked Questions

SimpleMermaid is a free, browser-based diagram editor built on Mermaid.js. It lets you create flowcharts, sequence diagrams, Gantt charts, entity relationship diagrams, and many other diagram types using simple text-based syntax. There is no registration required and your diagrams are processed entirely in your browser, meaning they never leave your machine. Whether you are a software developer documenting architecture, a project manager planning sprints, or a student learning about system design, it provides a fast, distraction-free environment for visual communication. Visit the Learn page to get started with the syntax.

Yes, it is completely free. There are no paid tiers, no usage limits, and no watermarks on exported diagrams. You can create unlimited diagrams and share them with anyone. The tool is supported by the community and will remain free for both personal and commercial use.

No. This tool requires no registration, no login, and no personal information. Just open the editor and start creating diagrams immediately. Your theme preference is stored in your browser's localStorage, but no data is ever sent to a server.

Absolutely. The tool is free for both personal and commercial use. You can use it to create diagrams for client presentations, internal documentation, architecture reviews, sprint planning sessions, and any other professional purpose. There are no restrictions on how you use the diagrams you create.

Open the editor and type your Mermaid.js syntax in the left panel. The diagram renders in real time on the right. You can start with any of the 45+ built-in examples from the dropdown, or write your own code from scratch. For example, type flowchart TD followed by A[Start] --> B[End] to create a simple flowchart. Check out the Learn page for a complete syntax reference.

The editor supports all Mermaid.js diagram types, including flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, entity relationship diagrams (ERDs), user journey maps, pie charts, requirement diagrams, git graphs, mindmaps, and timeline diagrams. The editor stays up to date with the latest Mermaid.js releases via CDN. Explore the Diagram Gallery for curated examples of each type.

Yes. The editor supports both vertical (side-by-side) and horizontal (stacked) layouts. You can toggle between them using the layout button in the toolbar. The editor also features a resizable separator that you can drag to adjust the ratio between the code panel and the preview panel, giving you full control over your workspace.

Yes. Mermaid.js supports inline styling and CSS classes within diagrams. You can customize colors, borders, fonts, and more directly in your diagram code using style statements and classDef declarations. For guidance on using color effectively, see our Best Practices guide.

When you click the Share button, the tool compresses your diagram code using LZ-String compression and encodes it into the URL after the #diagram= fragment. Anyone with the link can open it and see your exact diagram rendered instantly. No server storage is involved at all. The diagram data lives entirely in the URL itself, making it perfect for pasting into Slack messages, emails, or documentation.

You can export diagrams in three formats: PNG for raster images ideal for presentations and chat messages, SVG for scalable vector graphics that look sharp at any size and work well in web pages, and PDF for formal documentation and printing. All exports are high quality with no watermarks.

The practical limit is determined by the maximum URL length supported by your browser, which is typically around 2,000 characters for most platforms. LZ-String compression is very efficient, so most diagrams fit comfortably. For extremely large diagrams, consider breaking them into smaller, focused diagrams or using subgraphs to manage complexity. See our Managing Complexity section for tips.

The editor works in all modern browsers including Chrome, Firefox, Safari, and Edge. For the best experience, use the latest version of your preferred browser. The editor uses standard web APIs including CSS Grid, CSS custom properties, and the Fetch API, which are supported in all current browser versions.

The tool has limited offline capability. The editor includes embedded fallback examples that load when external example files are unavailable. However, the initial page load requires an internet connection to fetch the Mermaid.js library from the CDN. Once the page is loaded and cached by your browser, basic editing may continue to work even if connectivity is temporarily lost.

Your diagrams are processed and rendered entirely in your browser. The application has no backend server and does not collect or store your diagram data. Theme preferences and editor settings are saved in your browser's localStorage. Shared diagrams are encoded directly in the URL. We take your privacy seriously; read our full Privacy Policy for details.

The most common cause is a syntax error in your Mermaid code. Check for missing arrows (-->), unclosed brackets, or an incorrect diagram type declaration on the first line. The editor displays error messages below the preview panel to help you identify the issue. You can also try loading one of the built-in examples to compare working syntax with your own code. Visit the Learn page for a comprehensive syntax reference.

If a sharing link does not load your diagram properly, make sure the full URL was copied including everything after the # symbol. Some messaging apps, email clients, or URL shorteners may truncate long URLs or strip the hash fragment. Try copying the link directly from the browser address bar rather than from a chat message. If the link is very long, consider using a URL shortener that preserves fragments, or break your diagram into smaller parts.

Yes, this is expected behavior. The editor applies specific SVG-level theme overrides to ensure diagrams are readable in both light and dark modes. Colors, backgrounds, and text within the rendered SVG are adjusted automatically to match your selected theme. If you notice any readability issues with a specific diagram type in dark mode, try toggling back to light mode for comparison, or adjust your inline styles accordingly.

The best place to start is our Learn Mermaid page, which covers all diagram types with examples and explanations. You can also load any of the 45+ built-in examples in the editor to see working code and modify it interactively. For real-world usage patterns, check out the Use Cases guide and the Diagram Gallery.