Sequence diagram

+ Syntax

https://mermaid-js.github.io/mermaid/#/sequenceDiagram

+ Code

sequenceDiagram
    autonumber
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

+ Display

{"diagramDefinition":"sequenceDiagram\r\n    autonumber\r\n    Alice->>John: Hello John, how are you?\r\n    loop Healthcheck\r\n        John->>John: Fight against hypochondria\r\n    end\r\n    Note right of John: Rational thoughts!\r\n    John-->>Alice: Great!\r\n    John->>Bob: How about you?\r\n    Bob-->>John: Jolly good!"}

Mindmap

+ Syntax

http://mermaid.js.org/syntax/mindmap.html

+ Code

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

+ Display

{"diagramDefinition":"mindmap\r\n  root((mindmap))\r\n    Origins\r\n      Long history\r\n      ::icon(fa fa-book)\r\n      Popularisation\r\n        British popular psychology author Tony Buzan\r\n    Research\r\n      On effectiveness<br/>and features\r\n      On Automatic creation\r\n        Uses\r\n            Creative techniques\r\n            Strategic planning\r\n            Argument mapping\r\n    Tools\r\n      Pen and paper\r\n      Mermaid"}