Inserting js-sequence diagrams in MkDocs

Steps

  1. Install MkDocs and PyMDown Extensions.
  2. Create an MkDocs project.
  3. Add a javascript file to parse the js-sequence-diagrams syntax in the markdown.
  4. Edit mkdocs.yml.
  5. Edit your markdown file and build your docs.

Detailed tutorial written on Medium.

Sample sequence diagram

Here is a Hello World example.

Title: Hello World
Bob->Alice: Hello
Alice-->Bob: How are you?
Note left of Bob: Bob thinks
Bob->>Alice: I'm good, thanks! How about you?
Alice-->Bob: I'm doing great, thank you!