Format shape styles and colors in Mermaid styling

Hi ​@Nico Villanueva, thanks for your post! Unfortunately, this isn’t currently supported in Lucid, but we’re very interested in your feedback and committed to continually improving our products.

If you’re willing to share, we’d love to hear more details about your use case or what you’d like to see in this experience within this thread. I’ve also converted this post to an idea so that it’s visible to others within the Product Feedback section of the community - from here, they can upvote it and add details of their own.

Finally, for more information on how Lucid manages feedback via this community, take a look at this post:

Thank you for sharing your ideas and feedback in the Community. Please feel free to let us know if you have any questions! 

I agree with Nico. The lines are very thin and light. The area where this really impacts visualization is in the loop/alt/opt/other boxes. It is not easy to see the boundaries of these boxes. What I’ve done now is use a group box around the loop/alt/opt/other boxes, but it is not an ideal solution.

Hi ​@Leianne C ,

Adding to Nico’s question.

I found the mermaid interface useful to create flowcharts and sequence diagrams. I am planning to automate a few tasks and wanted to know the following,

1. How can we update the font and shape size using the code?
   • Can we get access to edit the diagrams generated by the code without editing the code?
     • This is to create a template for my teams workflow.
2. There are a lot of syntax and configurations available in the latest version of mermaid.
   • When will the latest version of mermaid (Version 11.4.1) be integrated to lucid chart?

Hi ​@Rajath, thank you for leaving your feedback within this thread! This is helpful to our product development team as they research new features and product enhancements. Your upvote of the post and your comment here are great ways to indicate your support for this idea.

To answer your questions - A diagram generated from code is displayed as an image on the canvas and must be updated by opening and editing the code.

Regarding your question about mermaid version, Lucidchart is currently optimized to support version 10.2.3 of Mermaid. If you would like to see the latest version of Mermaid integrated with Lucidchart, I would recommend creating an idea that will be posted to the Product Feedback section just like this post is! That would be the best way to get more visibility to your request, as the product team regularly checks for feedback within this space.

I do want to leave one resource here in case it is helpful for you or others who come across this post. To learn more, I recommend reading through the Diagram as code with Mermaid in Lucidchart article from the Lucid Help Center.

New edit 10/24/2025: Lucidchart is now optimized to support version 11.4.1 of Mermaid. 

Hello ​@Ambar D.​

Thank you for your response on this topic.

Okay. I will plan on ‘creating an idea’ in a few weeks time to check for the latest integration of Mermaid.

However, could you please see if there is a workaround on the first topic. It will be really helpful.
Ex: Once the diagram is created using the code, we should be able to copy the diagram to a standard canvas and apply some ‘Conditional Formatting’ to fit our needs.
Or provide formatting options in the Code section to update the font and shape size once the flowchart using the code is complete.

Does Lucidcharts “diagram as code” via Mermaid not support node styling?  I’ve attempted to utilize the Mermaid node styling via “style … fill:#<hex>” and the diagram as code always indicates that there is a syntax error.  I’ve tried the exact same syntax on the Mermaid LiveEditor and the diagram renders as desired.  This is renders that option as extremely un useful and drives me to using mermaid diagram instead.

Please share an update, I would like to configure the styles, colors, font for the Mermaid Sequence Diagram on Lucid Chart.

Mainly Match Corporate Theme and Brand colors. 

Hi ​@Ambar D  - can you confirm that Lucid supports Mermaid styling? As ​@chenson says above, if you attempt to use Mermaid classDef, class or style elements in the code, Lucid reports a syntax error. The same code works fine in MermaidChart and is compliant with the Mermaid syntax.

E.g.

Hi ​@enjfdh, thanks for adding to this thread! 

To clarify, are you having difficulty generating the diagram to begin with? Or are you attempting to edit and style an existing diagram? 

Would you be willing to copy/paste the syntax into this thread? That will help me to take a closer look. 

Thanks for your help and patience here!