Upgrade MermaidJS to 11.4.1

Contribute Feature

AI-generated summary

The discussion revolves around upgrading the MermaidJS library to version 11.4.1, which includes new features like Kanban diagrams, architecture diagrams, and enhanced flowchart shapes. tvavrda initiated the request, highlighting the release notes and breaking changes. Ric suggested broader upgrades, including Font Awesome Pro, and proposed an admin console option for version selection. Moin referenced the Font Awesome Pro discussion. tvavrda noted the current version is outdated. david confirmed the upgrade, providing a link to the commit and showcasing a new Kanban diagram example.

1

Would it be possible to upgrade mermaid library to the latest? Currently it is on 10.6.1.

Full Changelog

Breaking Changes

Kanban Diagrams

The image shows a task management board with columns labeled "Todo," "In progress," "Ready for deploy," "Ready for test," "Done," and "Can't reproduce," listing various tasks related to sport data processing and testing. (Captioned by AI)
The image shows a task management board with columns labeled "Todo," "In progress," "Ready for deploy," "Ready for test," "Done," and "Can't reproduce," listing various tasks related to sport data processing and testing. (Captioned by AI)1856×442 119 KB

Architecture Diagrams

The image depicts a system architecture showing interaction between an API, server, database, and two storage components connected through lines, indicating a flow or relationship between each element. (Captioned by AI)
The image depicts a system architecture showing interaction between an API, server, database, and two storage components connected through lines, indicating a flow or relationship between each element. (Captioned by AI)628×708 20.7 KB

New Flowchart Shapes

The image displays a variety of black and white icons and objects arranged in rows, each labeled with "a label." (Captioned by AI)
The image displays a variety of black and white icons and objects arranged in rows, each labeled with "a label." (Captioned by AI)1798×838 76.5 KB

2 Likes
3

I’d love to see this also! There’s a few components that would be good to upgrade like mermaid.js, fontawesome → fontawesome pro, etc I wonder if this could be a page in the admin console to let sites choose versions etc?

2 Likes
4

There is Discourse FontAwesome Pro

3 Likes
5

Which by itself seems to be a little outdated.

1 Like
6

Mermaid is now updated to 11.4.1 :tada:

https://github.com/discourse/discourse-mermaid-theme-component/commit/03d9131089e926df21507eac37007a62e54b2f0f

Example of the new ‘kanban’ diagram type:

kanban
  Todo
    [Create Documentation]
    docs[Create Blog about the new diagram]
  [In progress]
    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
  id9[Ready for deploy]
    id8[Design grammar]@{ assigned: 'knsv' }
  id10[Ready for test]
    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
  id11[Done]
    id5[define getData]
    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }

  id12[Can't reproduce]
    id3[Weird flickering in Firefox]
8 Likes
7

This topic was automatically closed after 3 days. New replies are no longer allowed.