Documentation
Learn how to use Everything Mermaid to create and manage your Mermaid diagrams.
Editing & Exporting
The main purpose of this tool is to provide a seamless experience for editing text-based Mermaid diagrams. You can write your diagram code in the editor on the left, and see the results instantly.
Advanced Editor
The editor includes line numbers, Mermaid syntax highlighting, and smart formatting to make large diagrams easier to read and edit.
Real-time Render Panel
The panel on the right renders your diagram in real-time as you type. Any changes you make to the text are immediately reflected in the visual representation, allowing for a fast and iterative design process.
Click-to-Highlight Preview
Click any rendered node or connector in the preview to jump the editor to the matching Mermaid line. This makes it easy to find and update the exact statement that created a specific shape or link.
Preview Zoom Controls
Use the zoom buttons in the bottom-right of the preview to zoom in, zoom out, or reset to 100%. You can also use your mouse wheel while hovering over the preview to zoom without affecting the rest of the page.
Click-and-Drag Panning
When zoomed in, click and drag inside the preview to move around the diagram. This makes it easy to explore large diagrams without changing the zoom level.
Resizable Layout
You can drag the vertical bar between the editor and preview to adjust their widths. You can also hide the preview pane entirely to focus on editing, or show it when you're ready to see the result.
Export to PNG
Once your diagram is ready, you can export it as a PNG image by clicking the "PNG" button in the preview header. A modal will appear allowing you to optionally include the diagram's name and description as an overlay in the top-left of the exported image. The file will be downloaded to your device with a name following the <diagram-name>-<date_time>.png format.
Edit Diagram Details
You can update a diagram's name, description, folder, organization, and public visibility from the editor's Details button. You can also do the same directly from the My Diagrams page by clicking Details on any diagram card, without opening the diagram itself. When you open details from My Diagrams, saving or canceling returns you to the same list view.
You can also delete a diagram from the Details screen. Deletions are confirmed and the diagram is moved to Trash.
AI Prompt Bar
If AI is enabled on your account, a prompt bar appears at the bottom of the editor. You can collapse it to clear space, then expand it again whenever you need it. Your expanded/collapsed preference is remembered in local storage.
AI token balance appears in the top-right navigation bar so you can keep an eye on usage without obstructing the editor.
Status Bar & Syntax Errors
Located at the bottom of the editor, the status bar stays pinned to the visible area so you can always see it without scrolling. If your Mermaid code contains syntax errors, the status bar will turn red and show the error message in a compact one-line view. If the message is too long, a Details button appears so you can expand the full error in a modal. Additionally, a red squiggle marker appears inline with a matching marker in the editor gutter, helping you pinpoint and fix syntax issues quickly.
Data & Storage
Cookies
We use cookies primarily for authentication purposes. These cookies keep you logged in as you navigate the site. We do not use cookies for tracking or third-party advertising.
Local Storage
Local storage is used to protect your work. If you have changes to a diagram that haven't been saved to our servers yet, they are stored locally in your browser. This ensures that you don't lose progress if your connection is interrupted or you accidentally close the tab.
Sharing & Collaboration
Organizations
Organizations allow groups of users to collaborate on diagrams. When you create an organization, you can invite team members and share diagrams or folders with the entire group, ensuring everyone has access to the latest designs.
Folders
Folders help you organize your diagrams. Like individual diagrams, folders can be shared with other users or organizations, making it easy to manage permissions for multiple related diagrams at once.
Folder and diagram details include a dedicated Sharing tab between General and Exports, so public access settings and copyable links stay separate from other properties.
Public Sharing
If you want to share your work with the world, you can make diagrams or folders public. This generates a unique link that anyone can use to view your rendered diagrams without needing an account.
Public diagram pages include a read-only, syntax-highlighted Mermaid viewer with line numbers, plus quick actions to copy or download the Mermaid source and export the preview as a PNG.
If you're logged in, you can make a copy of a public diagram into your own workspace. You will be prompted for a new name and where to save it.
Deletion & Trash Bin
Deleting a diagram or folder is initially a "soft-delete." Items you delete are moved to a Trash Bin, where they stay until you decide to either restore them or permanently delete them. This provides a safety net against accidental deletions.
Delete actions ask for confirmation, and items moved to Trash can be restored later.
Privacy & Administration
We take your privacy seriously. Site administrators have access to the database for maintenance and support, but we respect your privacy and avoid accessing your data unless it is required for debugging or troubleshooting. When support access is necessary, we limit it to the minimum information needed.