Websequencediagrams-docsify NPM

websequencediagrams-docsify

A plugin to render web sequence diagrams -- Just like that!

It would be as simple as writing this in your markdown, and applying the javascript to it. Docsify does the rest!

Impression

This is how the output looks and feel like

npm.io

Take a look at the live project present here

Integration in Docsify

There could be many ways of doing it, but the easiest would be something of this nature:

Install Docsify appropriately and make sure you can run docsify serve your_dir
Under index.html of your docsify installation, add this bit to enable this plugin

<script src="https://unpkg.com/websequencediagrams-docsify@1.0.2/dist/docsify-websequencediagrams.js"></script>

Your end result would look something like this:

<!DOCTYPE html>
<html lang="en">
<head> ... </head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: '',
      repo: ''
    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
  <script src="https://unpkg.com/websequencediagrams-docsify@1.0.2/dist/docsify-websequencediagrams.js"></script>
  ...
</body>
</html>