This is a feature-rich, single-page web application built with HTML, CSS, and Vanilla JavaScript that leverages the power of Mermaid.js to create, view, edit, and export various types of diagrams directly in your browser.
(Optional: Add a screenshot of the application here)
This tool provides a comprehensive set of functionalities for working with Mermaid diagrams:
-
Live Mermaid Rendering:
- Renders Mermaid syntax entered into the input area into a visual diagram.
- Updates the preview automatically when templates are selected or when saving from the editor popup.
- Manual rendering via the "Render Diagram" button.
-
Wide Range of Templates:
- Includes a dropdown menu with pre-defined templates for various diagram types:
- Flowcharts (Top-Down, Left-to-Right, Complex with Subgraphs)
- Sequence Diagrams (Basic, Advanced)
- Class Diagrams
- State Diagrams
- Entity Relationship (ER) Diagrams
- User Journey Maps
- Gantt Charts
- Pie Charts
- Requirement Diagrams
- Git Graphs
- C4 Context Diagrams
- Mind Maps
- Timeline Diagrams
- Quadrant Charts
- Selecting a template populates the input area and triggers rendering.
- Includes a dropdown menu with pre-defined templates for various diagram types:
-
Syntax Input & Editing:
- Main Textarea: Direct input and modification of Mermaid syntax in the left-hand panel.
- Popup Editor: A dedicated, larger modal window (
Open Editorbutton) for focused editing of the Mermaid syntax, reducing distractions. Includes "Save & Close" and "Close" options.
-
Diagram Preview & Interaction:
- Right-Side Preview: The rendered diagram is displayed in the right-hand panel for immediate visual feedback.
- Zoom & Pan Window: (
Zoom/Panbutton) Opens the current diagram in a separate modal window designed for closer inspection.- Zoom: Use the slider to zoom in and out of the diagram. The current zoom level (%) is displayed.
- Reset Zoom: Quickly reset the zoom level to the default.
- Panning: Use the browser's scrollbars within the preview area to pan across the diagram when zoomed in.
-
Export Options:
- Export SVG: Download the rendered diagram as a scalable vector graphics (
.svg) file. - Export PNG: Download the rendered diagram as a raster (
.png) image.- Configurable Dimensions: Set the desired Width and Height for the exported PNG.
- Configurable Scale: Apply a scaling factor (e.g., 2x for higher resolution) to the PNG export, based on the specified or natural dimensions.
- Export SVG: Download the rendered diagram as a scalable vector graphics (
-
Copy to Clipboard:
- Copy SVG: Copies the raw SVG code of the rendered diagram to the clipboard.
- Copy PNG: Copies the rendered diagram as a PNG image directly to the clipboard (requires a secure context like HTTPS or localhost and browser support for the Clipboard API with images).
-
Theming:
- Light/Dark Mode: A toggle switch allows users to switch between light and dark themes.
- Persistence: The selected theme is saved in the browser's
localStorageand applied automatically on future visits. - Mermaid Theme Adaptation: The rendered Mermaid diagrams automatically adapt their appearance to match the selected light or dark theme.
-
User Experience & Feedback:
- Responsive Design: The layout adapts for usability on different screen sizes, stacking panels vertically on smaller devices.
- Loading Indicator: Displays a "Rendering..." message while Mermaid is processing the diagram.
- Error Handling: Shows clear error messages if the Mermaid syntax is invalid or rendering fails.
- Copy Feedback: Buttons provide visual feedback ("Copied!") when content is successfully copied to the clipboard.
- Smooth Animations: Subtle animations enhance the user interface for actions like opening popups, rendering diagrams, and switching themes.
- Download: Obtain the
working5.htmlfile. - Get Mermaid.js: Download the
mermaid.min.jslibrary file from the official Mermaid.js source (e.g., CDN or GitHub releases). - Placement: Place the
mermaid.min.jsfile in the same directory asworking5.html, or update the<script src="mermaid.min.js"></script>tag in the HTML<head>to point to the correct path. - Open: Open the
working5.htmlfile in a modern web browser (like Chrome, Firefox, Edge, Safari). - Create:
- Select a template from the dropdown.
- Or, type/paste your Mermaid syntax directly into the left textarea.
- Or, use the "Open Editor" button for a focused editing view.
- Render: Click "Render Diagram" (or it renders automatically after template selection/editor save).
- Interact & Export: Use the Zoom/Pan, Export, and Copy buttons as needed.
- Mermaid.js: (Requires
mermaid.min.jsto be present). The core library used for parsing the syntax and rendering diagr 4D66 ams.
- HTML5
- CSS3 (including CSS Variables for theming, Flexbox/Grid for layout, Animations/Transitions)
- Vanilla JavaScript (ES6+)
- Mermaid.js Library