https://github.com/aajiwani/websequencediagrams-docsify
A plugin to render web sequence diagrams under docsify -- Just like that!
https://github.com/aajiwani/websequencediagrams-docsify
docsify websequencediagrams websequencediagrams-docsify
Last synced: 8 months ago
JSON representation
A plugin to render web sequence diagrams under docsify -- Just like that!
- Host: GitHub
- URL: https://github.com/aajiwani/websequencediagrams-docsify
- Owner: aajiwani
- License: mit
- Created: 2020-09-21T01:17:55.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-12-10T09:41:32.000Z (almost 4 years ago)
- Last Synced: 2025-03-11T12:17:04.658Z (8 months ago)
- Topics: docsify, websequencediagrams, websequencediagrams-docsify
- Language: JavaScript
- Homepage: https://aajiwani.github.io/websequencediagrams-docsify
- Size: 676 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-docsify - websequencediagrams-docsify - A plugin to embed [WebSequenceDiagrams](https://www.websequencediagrams.com) right into your documentation. (Plugins)
README
[](https://app.travis-ci.com/aajiwani/websequencediagrams-docsify)
# 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!
```websequencediagrams
title Foo-Bar!
Alice->Bob: Authentication Request
note right of Bob: Bob thinks about it
Bob->Alice: Authentication Response
```
## Impression
This is how the output looks and feel like
`Take a look at the live project` present [here](https://aajiwani.github.io/websequencediagrams-docsify)
---
## 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
```html
```
- Your end result would look something like this:
```html
...
window.$docsify = {
name: '',
repo: ''
}
...
```
- You are now ready to consume websequence diagrams
- Add a `markdown` file within your docsify space stated below, and feel the magic!
```websequencediagrams
title Foo-Bar!
Alice->Bob: Authentication Request
note right of Bob: Bob thinks about it
Bob->Alice: Authentication Response
```
## Ways of running
Make sure you have `node` appropriately installed and either `npm` or `yarn` is available to you.
1. `yarn`
2. `yarn example &`
3. `yarn local_tests`
## References
Inspiration [project](https://github.com/Leward/mermaid-docsify)