Make common layout and render engines that can be used by many diagrams

[knsv]

Description

Objective: Streamline and enhance diagram rendering across various diagram types in Mermaid.

Current Challenge: There is noticeable duplication in functionality among different diagram types. Several graph-based diagrams share common features in rendering, but these are implemented separately in each diagram type.

Proposed Solution:

1. Unified Layout Engine: Implement a singular layout engine for all graph-based diagrams.

   • Benefits:
     • Facilitates the introduction of new layout algorithms universally across all graph-based diagrams.
     • Enhances consistency in diagram layouts.
   • Clarification: Are there specific layout algorithms currently under consideration for initial integration?

2. Common Renderer: Develop a common renderer for all graph-based diagrams.

   • Benefits:
     • Standardizes interaction, styling, and class handling across diagrams.
     • Enables shape reusability between different diagram types.
     • Potential for extension to non-graph-based diagrams (e.g., block and sequence diagrams).

Diagram Implementation: The attached Mermaid flowchart illustrates the proposed architecture, showing how different diagram types (e.g., Flowchart, State, Class, ER, Sequence, Block, etc.) will interact with the unified layout engine and renderer.

Expected Outcomes:

• Simplified maintenance and scalability for diagram types.
• Reduced effort in integrating new layout algorithms and extending diagram categories.

flowchart LR
    A>"Flowchart code"] --> parser1(["parser"])
    node-u5xnc3yve(["Layout"]) -- Rendering Format --> node-gr8ky0vrb(["Render"])
    parser1 -- Layout Format --> node-u5xnc3yve
    node_qk0z4xkea>"State Diagram Code"] --> parser2(["parser"])
    node_ku68ruhfb>"Class Diagram Code"] --> parser3(["parser"])
    node_8gc4rm2ko>"ER Diagram Code"] --> parser4(["parser"])
    seq>"Sequence Diagram Code"] --> parser6(["parser"])
    block>"Block Diagram Code"] --> parser7(["parser"])
    node_2kijumx6n>"Etc"] --> parser5(["parser"])
    parser2 -- Layout Format --> node-u5xnc3yve
    parser3 -- Layout Format --> node-u5xnc3yve
    parser4 -- Layout Format --> node-u5xnc3yve
    parser5 -- Layout Format --> node-u5xnc3yve
    parser6 --> node-6vdqsxzdx["Layout"]
    node-6vdqsxzdx -- Rendering Format --> node-gr8ky0vrb
    node-s08rige4u["Layout"] -- Rendering Format --> node-gr8ky0vrb
    parser7 --> node-s08rige4u
    style node-u5xnc3yve fill:#2962FF,color:#FFFFFF
    style node-gr8ky0vrb fill:#2962FF,color:#FFFFFF

Overall, this will make the maintenance of diagrams much more manageable and will decrease the effort of adding new layout algorithms and diagram types.

[asknet]

Great initiative! Just curious, Will there be a plan to define sub-diagrams that are of different types? For example, use flowchart and blockdiagram within the main diagram?

[sidharthv96]

@asknet that feature will not be part of this change, but this and the new parser lays part of the foundation that's required to support multiple diagrams.

[RawRaw111]

Latouts