Skip to main content
Delivered

Lucidchart Mermaid UML Support

Related products:Lucidchart
  • September 14, 2021
  • 38 replies
  • 938 views

Luciano B

It would be great if Lucidchart supported Mermaid (https://mermaid-js.github.io/mermaid/#/) for creation of UML Diagrams.

September 5, 2024

I am excited to share that Lucid has released the ability to create a diagram using mermaid code syntax! We support 8 different diagram types including: flowchart, sequence, class, state, C4, gantt, and entity relationship diagrams. Try it out for yourself or learn more here

You will still be able to create UML diagrams leveraging our UML markup features.

 

Comments

Phil W
  • November 24, 2021

Agreed - being able to author diagrams in Lucidchart then import them into Azure DevOps wikis would be very useful.


Abby S
Forum|alt.badge.img+11
  • Lucid community team
  • February 18, 2022

Hey Luciano and Phil thank you for posting in the Lucid community! Our sincere apologies for the delayed response on this thread--I wanted to follow up in case this answer may still be useful to you and to provide a solution for other users who see this thread in the future. 

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.


Luciano B
  • Author
  • February 25, 2022

Hey Phil W

Sorry for delay in responding.  Hopefully you found out already that Azure DevOps Wikis natively support Mermaid Diagrams.

Enter as following: 

::: mermaid
sequenceDiagram
    Alice->>John: Hello John how are you?
    John-->>Alice: Great!
:::

Then it will render the diagram for you.

Unfortunately there is a limited set of diagrams that it supports.


Erik H102
  • February 21, 2023

Is there a place where we can track a feature request? Or can someone give us a status update?

It's more than one year ago and I'd also like to see support for Mermaid in Lucid so at least I can design my charts in one place export them etc.


Phillip W
Forum|alt.badge.img+16
  • Lucid support team
  • February 21, 2023

Hi Erik

Thank you for keeping this thread going and I want to ensure you that we DO hear you however this integration is not yet built. We receive lots of fantastic ideas (including this one 😎) that our Dev Team has to prioritize and construct. Rest assured once this functionality is in place we will definitely reach out and deliver the good news!

Again thank you for voicing how Lucid can best assist with your workflow and giving us the opportunity to make things even easier--firm handshakes 🤝


William
  • March 20, 2023

One can import a mermaid diagram into Draw.io. Then one can import the draw.io diagram into Lucid. But my basic flow chart in draw.io only created a blank page after import in Lucid.

So we have a undeveloped new feature and an existing broken feature. I reported the bug in the app with a link to my draw.io file.

:-(


Leianne C
Forum|alt.badge.img+15
  • Lucid support team
  • March 21, 2023

Hi William thank you for continuing this thread and submitting a support ticket - I can see that someone from our team has responded to your ticket! Please continue working with our team in the support ticket to troubleshoot the issue. 

For anyone reading with a similar request for Mermaid support we encourage you to add your voice to the thread. Thank you!


Lorne H
  • March 21, 2023

Hello

I also would love to be able to export a Lucid chart to Mermaid for native display in Azure DevOps!. 


Micah
Forum|alt.badge.img+20
  • Lucid community team
  • March 21, 2023

Hi Lorne thanks for adding your request here - we've logged it!


Tim C102
  • April 19, 2023

Support for importing and exporting Mermaid code would be great a number of tools I use already support it. See a list of tools that support it here: https://mermaid.js.org/ecosystem/integrations.html

For sake of an example I use Obsidian heavily and it would be great to be able to draft my diagrams as Mermaid code in Obsidian and then paste the code into Lucidchart to share it or be able to copy Mermaid code for a diagram from Lucidchart and paste it into my notes in Obsidian.


Leianne C
Forum|alt.badge.img+15
  • Lucid support team
  • April 20, 2023

Hi @tim c102 thank you for sharing your feedback and an example of your use-case!


Ed C
  • April 27, 2023

I would also like to see mermaid support for Lucid Charts.
Draw.io desktop and diagrams.net support it.


Leianne C
Forum|alt.badge.img+15
  • Lucid support team
  • April 28, 2023

Hi @ed c thank you for continuing this thread


Ed C
  • April 30, 2023

@admin can you please change the title from "mermain" to mermaid". I think this is a typo and makes it hard for people to find this thread.


Leianne C
Forum|alt.badge.img+15
  • Lucid support team
  • May 1, 2023

Hi @ed c thanks for raising this! I have updated the title to "Mermaid" to help users find this community post cheers! 🙌 


KENT P
  • May 4, 2023

LucidChart currently supports a significant subset of Mermaid syntax for sequence diagrams.

  • Are there plans to expand the scope of Mermaid syntax supported for sequence diagrams? ("Actor" participants for example)
  • Are there plans to extend the range of Mermaid document types supported? (State Diagrams for example)

Leianne C
Forum|alt.badge.img+15
  • Lucid support team
  • May 5, 2023

Hi @kent p thanks for keeping this conversation going! While I'm not able to share any updates on plans for Mermaid syntax I can assure you that our devs are always striving to make Lucidchart better for our users. Please continue submitting your thoughts and ideas via this thread. Once this functionality is available we will reach out and update this thread!

If you're interested to know what happens to your feedback or feature request after you've filled in the form I would recommend giving the following Community post a quick read: What happens to my feedback?

Thanks again for your willingness to share your ideas with us. Cheers!


William L102
Forum|alt.badge.img+1

I'd like to upvote Kent P's post.  As a paying user I want more UML Markup support beyond sequences.  A mindmap or entity markup syntax would be desirable.


Vitalii B
  • August 11, 2023

Hi.

+1 for mermaid support.

The reasoning is that we want to have one rendering "tool"/"syntax" for getting awesome diagrams from text descriptions. Another point is that we use mermaid in GitHub Markdown. I believe you agree that rendering the text into a diagram is much easier than building a diagram from scratch. Mermaid support in the Lucidchart would be extremely beneficial for us. As for the syntax we use it's C4 (same syntax in mermaid and plantUML) sequence (thanks for bringing it in) and class diagrams.

Lucidchart is a great tool and we can't wait for it becomes even better with Mermaid support.


Paul M104
  • August 26, 2023

I want to ChatGPT to interpret my Lucidcharts - please add Mermaid support.  


Ed C
  • August 27, 2023

Regarding ChatGPT and Mermaid charts.

Nicest thing about mermaid is that it's just plain old text so AI can generate it. 
The trick is to prompt the model with the right questions and double check syntax which is very poor at times.
I was experimenting with OpenAI API and started getting some great results (when it was free).
Calling the API from a script allows you to control the output and get better results.

You can try it using the following ChatGPT prompt:
Generate the correct mermaid syntax to represent the following sentence in a diagram. Please check the correct syntax for mermaid ClassDiagram. "The cat is in the car. The car is parked inside the garage which is attached to the house"

ChatGPT Returns:

classDiagram
  class Cat {
    -location: Car
  }

  class Car {
    -location: Garage
  }

  class Garage {
    -attachment: House
  }

  class House {
    // House properties and methods
  }

  Cat --> Car: is in
  Car --> Garage: is parked inside
  Garage --> House: attached to

 


Angelos P
  • August 28, 2023

Hello

 

I'd also like mermaid code support!


Lynn A
  • September 15, 2023

I also vote for mermaid support


Tyler L102
  • September 21, 2023

+1 for mermaid support 


Tom H103
  • October 1, 2023

My vote added for Mermaid Integration. GPT 4 can be tricked into portable code via matplotlib or graphx but Mermaid / C4 / Elixir integrations are all text friendly and easy for GPT to generate.