Skip to main content

I’ve been using the new Mermaid integration to create mainly sequence diagrams, but more to come.

Is there any way to change the styles? The default light lilac for participants and lines is just too, eh, light.

Is there an option I haven’t found yet? Is it planned to be supported?

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. I will ask my team internally to see if there is a workaround that could help here.

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.


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 ​@Rajath, ​@chenson, and ​@ksriramyahooinc

Sorry for any confusion here. To edit the style and format of your diagram, you must include Mermaid styling syntax directly in the code. Mermaid provides some guidelines for styling in this documentation as well as information on theme configuration

Once a diagram is generated in Lucidchart from our diagram as code feature, they are not able to be styled within the Lucidchart toolbar. To style them, the style code needs to be included in the original mermaid.

I also wanted to provide an update since my last post here - Lucidchart is now optimized to support version 11.4.1 of Mermaid. You can find the latest details in our Help Center article and refer to the official Mermaid syntax documentation to check for compatibility.