Proof of concept: mermaid

[as-op]

https://community.openproject.org/wp/29668

Testing mermaid integration:

• Include ckeditor/mermaid plugin
• mount diagrams in work package descriptions and activity comments
• error in the console when changing into edit mode with CKEditor
  (probably a timing bug in ckeditor/mermaid)
• GitHub adds view controls to their MermaidJS, making huge diagrams usable which would be displayed far too small otherwise
  

Showstopper:

• No export to PDF: Mermaid heavily uses browser layouting. For converting diagrams into valid SVG or PNG https://github.com/mermaid-js/mermaid-cli uses a headless browser via puppeteer, which installs several hundreds of MB of Chromium or Firefox support files. Server Side Support mermaid-js/mermaid#3650

Screenshots:


Note: Because of large changes in the activity tab, mermaid charts are not resolved in user comments anymore in this proof-of-concept.

[lindenthal]

Hi @as-op,

Thanks for working on this. I would like to reopen this spike. Can you please rebase it?

My intention is to explore options to use Mermaid for showing phases and gates in the project overview.

https://community.openproject.org/projects/stadt-koeln/work_packages/61382/activity?query_id=5924

Thanks
Niels

[as-op]

Hi @lindenthal,

happy to! I still think it would be of great value for many users to have Mermaid in OpenProject.

I don't have access to the work package you linked, so I'm not sure this PR will help: This is a proof of concept for Mermaid in the work package descriptions/long text fields/user comments, so it involves an unsupported CKEditor plugin in our CKEditor build.

Us using Mermaid as part of OpenProject - like we use Chart.js or FullCalendar - would be easier to maintain.

Best, Andrej

[sempervictus]

@lindenthal - any thoughts on native implementations for this feature (without the added weight)? All the cool bots are using it these days 😉

[syorito-hatsuki]

+1