UML-Tools is an online tool that allow users to visualize mermaidjs class diagram. It uses reactflow to render the image and dagre to provide additonal spacing functionalities.
I constantly run into challenges when visualizing UML diagrams generated with mermaidjs. These include;
- When dealing with complex diagrams the lines (edges) can become a giant pile of mess pretty fast with multiple lines crossing paths
- Inability to drag each component apart to have a better view.
Mermaid Liveprovide zoom functionality but that zooms the whole diagram not individual classes - Generated diagrams are not visually appealing. I get, it's "functionality over aesthetics", but why can't we have both?
- Visually appealing uml diagrams
- Draggable elements
- Zoom in/out functionalities
- Export functionality (to
png,svgandpdf) - Syntax highlighting and code completion
This is a Next.js project bootstrapped with create-next-app.
First, clone the repositoru and then run the development server:
npm install
npm run dev