search

ckeditor / github-writer

GitHub Writer - WYSIWYG Rich-Text Editor for GitHub, powered by CKEditor.
https://ckeditor.com/
Other
380 stars 61 forks source link

Add support for mermaid diagrams #292

Closed wwalc closed 2 years ago

wwalc commented 2 years ago

Add support for mermaid diagrams: github/roadmap#372

Minimal support: support through the code block feature

However, please note that together with the minimal support, there is no easy way to preview the diagram when you edit it in CKEditor. It's something more complex than the regular code blocks where you edit plain text and have some kind of life preview (just without the syntax highlight).
In order to effectively edit mermaid diagrams one will have to turn off CKEditor anyway, to edit it in the markdown mode where the "Preview" tab is available.

That brings us back to #42 and probably means that option 3) "CKEditor view without hidden "Preview" tab"" becomes the most reasonable.

wwalc commented 2 years ago

Just in case, it has been shipped:

  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;
mlewand commented 2 years ago

Fixed with 3a52e1f.

mlewand commented 2 years ago

All right this feature is out and is already published 🎉

At first we wanted to make a limited feature and just add a mermaid option to the code block languages dropdown.

But we saw a room to implement a dedicated widget that would render as you type which is much better and it turned out to be possible thanks to experimental ckeditor5-mermaid plugin.

Here's a short demo how it works:

https://user-images.githubusercontent.com/5353898/157271414-b24ceb70-57db-4ed8-8296-e500e797801b.mp4