Skip to content

Insert and preview mermaid/plantuml/kroki diagrams in content editor

Himanshu Kapoor requested to merge himkp-preview-plantuml into master

What does this MR do and why?

Allow inserting and previewing mermaid/plantuml/kroki diagrams in content editor by sending a request to the backend to get the diagram URL

Related issues

Screenshots or screen recordings

Screen_Recording_2022-05-31_at_1.55.00_PM

How to set up and validate locally

Preparing PlantUML and Kroki diagrams

Enable PlantUML and Kroki in Admin -> Settings -> General

image

Sample PlantUML/Kroki/Mermaid codes

Example codes:

```plantuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
```
 
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```
 
```nomnoml
  #stroke: #a86128
  [<frame>Decorator pattern|
    [<abstract>Component||+ operation()]
    [Client] depends --> [Component]
    [Decorator|- next: Component]
    [Decorator] decorates -- [ConcreteComponent]
    [Component] <:- [Decorator]
    [Component] <:- [ConcreteComponent]
  ]
```

Validating existing Mermaid/PlantUML/Kroki diagrams

  1. Create or edit a wiki page.
  2. In the plain text editor enter a sample Mermaid/PlantUML/Kroki code. (Use sample codes from the table above.)
  3. Click "Edit rich text" to switch to content editor.
  4. In the code block bubble menu, notice that the "eye" icon to preview the plantuml diagram should already be enabled. (Clicking it will disable the preview for that diagram.)
  5. Edit the diagram source and notice that the diagram preview live updates.

Inserting a new Mermaid/PlantUML diagram from the + menu

  1. Create or edit a wiki page.
  2. Click "Edit rich text" to switch to content editor.
  3. In the toolbar, click the + button and select either Mermaid or PlantUML diagram.
  4. Enter a sample Mermaid/PlantUML code. (Use sample codes from the table above.)
  5. In the code block bubble menu, notice that the "eye" icon to preview the plantuml diagram should already be enabled. (Clicking it will disable the preview for that diagram.)
  6. Edit the diagram source and notice that the diagram preview live updates.

Note

It is currently not possible to insert a kroki diagram from the menu.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Himanshu Kapoor

Merge request reports