Proof of concept: mermaid

[as-op]

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

Testing mermaid integration:

• [x] Include ckeditor/mermaid plugin
• [x] 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. https://github.com/mermaid-js/mermaid/issues/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 :wink:

[syorito-hatsuki]

+1