Mermaid diagram WYSIWYG GUI Editor

[AJNOURI]

Is your feature request related to a problem? Please describe.

We are relying more and more on Diagram as code concept and Mermaid, but coding complex diagrams from t0 is very heavy and daunting task. The idea is to create these diagrams using WYSIWYG web GUI editor that will be exported to mermaid code

Describe the solution you'd like

Overview:

The idea of the project is to create a web graphical user interface (GUI) tool that allows users to visually construct state diagrams which can then be automatically converted into Mermaid code. This tool is intended to simplify the process of creating state diagrams by providing an intuitive drag-and-drop interface where users can manipulate elements such as shapes and arrows to build complex diagrams directly compatible with Mermaid's syntax.

Functionality:

• Diagram Support: The tool will initially support the creation of state diagrams.
• Conversion Capability: Users will be able to convert their visual diagrams into Mermaid code, facilitating easy integration with documentation or development workflows that support Mermaid.

Features:

• Element Editing: Users can adjust the properties of shapes and arrows, including size, color, and labels, to match the requirements of their diagrams.
• Diagram Management: Features such as aligning, grouping, and layering elements will be available to manage and organize various components within the diagrams.
• Export: The tool will support exporting the created diagrams into Mermaid code format, aligning with Mermaid's capabilities for state diagrams. User Interaction:

Canvas Operations:

• The primary interactions will include dragging and dropping shapes and arrows (with optional directions and labels) onto a canvas.

Describe alternatives you've considered

I don't see alternatives

Additional context

Add any other context or screenshots about the feature request here.