Customizable Colors and Styles for Diagram Elements

[sshah135]

Proposal

As a user of Mermaid, this has helped me a lot with the diagram creation but I would like to add the ability to customize colors and styles for individual elements within diagrams. This feature would enhance the visual appeal of diagrams and allow for greater personalization.

User Story
As a diagram creator,
I want to be able to choose custom colors for nodes and links,
So that I can create visually appealing and personalized diagrams.

Proposed Implementation

• Add a color picker for each diagram element (nodes, links, etc.).
• Implement a function to dynamically update the Mermaid code with the chosen colors and styles.
• Modify the rendering engine to interpret and apply the custom styles.

Expected Behavior

• Users can select colors for individual elements using a color picker.
• The Mermaid code is updated in real-time as users choose colors.
• Diagrams render with the user-defined colors and styles.

Additional Context

This feature aligns with the goal of enhancing the user experience and allowing for greater creativity in diagram creation. It also falls under the "theme proposal" category, as it empowers users to define their visual themes for diagrams.

Labels:

enhancement
theme proposal
user experience

Can you please assign this issue to me

Colors

Make Mermaid diagrams cooler! Let users pick colors easily for their charts. by giving them option to chose their own color to create the diagram rather than providing them with the default color.

Screenshots

No response