What is the version of Mermaid used in GitHub Markdown?

[jtamyrc]

I try to use mermaid block in GitHub READMME.md.

I notice some of the feature of the mermaid is not supported.

So, where can I find the version of the mermaid used in GitHub from the documentation ?

[DSDmark]

Hey @jtamyrc,

here is an official mermaid site:-
mermaid

And also here is the thing which you need:-

config-instructions-for-older-versions

All Version

But I not recommend you to use because there are many places when it's not compatible, like in mobile app. Also, sometime it's so irritate when is come to responsiveness

[jtamyrc]

Thanks for your reply,

To clarify, I am not asking the version of mermaid, but what is the version of mermaid is used by GitHub markdown mermaid block?

For example the mermaid block below is copied from Mermaid doc: Merging two branches.

You can see there is a error when it try to render.

    gitGraph
       commit id: "1"
       commit id: "2"
       branch nice_feature
       checkout nice_feature
       commit id: "3"
       checkout main
       commit id: "4"
       checkout nice_feature
       branch very_nice_feature
       checkout very_nice_feature
       commit id: "5"
       checkout main
       commit id: "6"
       checkout nice_feature
       commit id: "7"
       checkout main
       merge nice_feature id: "customID" tag: "customTag" type: REVERSE
       checkout very_nice_feature
       commit id: "8"
       checkout main
       commit id: "9"

Loading

[DSDmark]

Hey how about that code. i think there are role like:-

• You need to provide the id for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this,make use of the commit id:$value format of declaring commits. See the examples from above.
• The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.
• Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.

check this out :- https://mermaid-js.github.io/mermaid/#/gitgraph?id=cherry-pick-commit-from-another-branch

   gitGraph
        commit id: "1"
        commit id: "2"
        branch nice_feature
        checkout nice_feature
        commit id: "3"
        checkout main
        commit id: "4"
        checkout nice_feature
        branch very_nice_feature
        checkout very_nice_feature
        commit id: "5"
        checkout main
        commit id: "6"
        checkout nice_feature
        commit id: "7" type: REVERSE
        checkout main
        commit id: "customID"
        merge nice_feature tag: "customTag"
        checkout very_nice_feature
        commit id: "8"
        checkout main
        commit id: "9"

Loading

```mermaid 
   gitGraph
        commit id: "1"
        commit id: "2"
        branch nice_feature
        checkout nice_feature
        commit id: "3"
        checkout main
        commit id: "4"
        checkout nice_feature
        branch very_nice_feature
        checkout very_nice_feature
        commit id: "5"
        checkout main
        commit id: "6"
        checkout nice_feature
        commit id: "7" type: REVERSE
        checkout main
        commit id: "customID"
        merge nice_feature tag: "customTag"
        checkout very_nice_feature
        commit id: "8"
        checkout main
        commit id: "9"

[jtamyrc]

@DSDmark , I think the version of mermaid in GitHub doesn't support merge with id and type. Only support merge with tag only.

Your code work because you use tag only in merge
merge nice_feature tag: "customTag"

My codes break because I use id, tag and type in merge like below:
merge nice_feature id: "customID" tag: "customTag" type: REVERSE

That's why I ask what the version of mermaid used in GitHub.
Apparently, GitHub doesn't use the latest version of mermaid as mentioned from the mermaid doc.

[jdevfullstack]

read this blog from GitHub, in the end of the file, it's pointing to some sources that you may be able to ask that discrepancy

https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/

[jtamyrc]

Thanks for your reply.

Unluckily, there is no reference of version of mermaid used in GitHub.

[DSDmark]

Hey @jtamyrc,

I know it's not grate help, but I think you should go there:-
mermaid-discussions

And create new discussion on official mermaid repo. I think they will help you to figuring out your problem

[jtamyrc]

Hi @DSDmark ,

Thanks for your help. However, I don't think it is mermaid issue.

GitHub control what version of mermaid they would like to use in their platform and Mermaid have nothing to do with this.

That's why I try to ask here to see if GitHub will respond to this question.

[DSDmark]

Hi @jtamyrc,

did get answer? I was discussed to maintainer of marimard about version, and he said some things.If you get any detail about it let me know i also like read.

(https://github.com/orgs/mermaid-js/discussions/3492#discussioncomment-4012922)

[jtamyrc]

@DSDmark , Thanks for your help. The lastest version would be too new to be released from GitHub then.

[piranna]

We still don't know what's the version of Mermaid used by Github, are we? I think it's important so we can know what features are available and what ones don't...

[DSDmark]

+1

[ThomasKasene]

This would be useful information to have easily accessible in the documentation, so +1 for that.

I've been digging a little in the page source in my browser and found a reference to https://viewscreen.githubusercontent.com/markdown/mermaid which, when viewing its page source, reveals a link to a /static/assets/mermaidMarkdown-<cachebreaker>.js file (I doubt I can link directly to it, assuming the <cachebreaker> changes from time to time.

After searching for a bit in the JS-file, I found at least this bit, which might hint at the version:

.text("mermaid version 9.1.6")

I don't know exactly which features you're after, but I find some references to merging in the changelog for Mermaid.js 9.1.7, so tough luck there 😅

According to the list of Mermaid.js releases, version 9.1.6 was released on August 18, 2022, so it doesn't look like Github is among the early adopters of new versions.

[dansmith65]

Looks like they've since made it even harder to find the version as they moved the version string into a variable so the line you found before now shows as:

.text("mermaid version " + a)

I suspect this variable assignment is where the version is currently defined:

cy = "9.3.0"

[guhuajun]

Greetings,

I just noticed that, GitHub is rendering the diagram with zoom controls! I just want to have it offline.
Is zoom control only available for GitHub?

[hoshikawa]

Maybe the variable is const Y="10.0.2", currently 👀

[nexushoratio]

It seems like having the version exposed via Mermaid itself would be the right thing to do. Which would be a Mermaid feature request.

[cbornet]

The currently deployed version of mermaid is

info

Loading

To display this info use the code

```mermaid
info
```

[fsahmad]

Nice... for those of us who work on a GitHub Enterprise instance you can create a markdown gist with this to see what version your instance is using too!

[dansmith65]

How did you find this command? I still can't find it in documentation anywhere.

[quilicicf]

It would be nice to upgrade Mermaid, some interesting features have landed since 10.0.2 🙏
Ex: Namespaces in class diagrams.

It's annoying to have diagrams showing nicely in one's editor and breaking on GitHub :-(

[thibaudcolas]

See #70672 for a request specifically about upgrading.

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬