This is like a charm, you can easily add something like:

Or even

With a fenced code blocks with the Imm language code, for example blocks above are made with

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

and

 graph LR
      A --- B
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner wait);
      D-->E(fa:fa-angellist)

just start the fenced code block with ~~~Imm. Case-insensitive.

You can do whatever mermaid can easily insert:

• flowcharts
• sequence diagrams
• Gantt charts

You can use icons from css-integrated font-awesome, just use fa:fa-... selector where appropriate.

Online editor

Try the online editor, it is extremely useful tool to prepare/update diagrams. Just copypaste results to the kb page.