🧠 HOW TO BUILD A DIAGRAM USING MERMAID AND DRAWIO 📦
A guide to creating and editing diagrams using Mermaid and DrawIO
This documentation provides step-by-step instructions for building diagrams with Mermaid and enhancing them in DrawIO.
Author: rblanco1@us.es
Date: 2025 July
Version: 1.0.0
📚 Table of Contents¶
📝 Project Overview¶
💡 This guide explains how to create diagrams using Mermaid's web editor and then enhance them in DrawIO for more precise editing capabilities.
🏗️ Repository Purpose¶
🎯 The purpose of this documentation is to provide a clear workflow for users who want to leverage Mermaid's simplicity for initial diagram creation and DrawIO's advanced features for final adjustments.
⚙️ Setup & Installation¶
🧰 No installation is required for basic usage, but access to the following web tools is needed:
🚀 Usage¶
▶️ Follow these steps to create and edit your diagrams:
1. Create a graph using Mermaid web editor:¶
- Visit the Mermaid web editor
- Login to your account
- Create a new project
- Initialize your project with your desired diagram
- Export your diagram as mmd text file or copy the text
2. Edit graph edges in DrawIO:¶
- Open DrawIO
- Start a new project
- Import your Mermaid text file
- Now you can edit edge positions and other elements
Note: Mermaid doesn't allow direct editing of edges as they don't have associated positions. The workflow of exporting to DrawIO solves this limitation.
📎 Notes & References¶
📚 Additional resources and references: