{"id":25047397,"url":"https://github.com/aajiwani/websequencediagrams-docsify","last_synced_at":"2025-03-31T02:17:43.302Z","repository":{"id":45540611,"uuid":"297196108","full_name":"aajiwani/websequencediagrams-docsify","owner":"aajiwani","description":"A plugin to render web sequence diagrams under docsify -- Just like that!","archived":false,"fork":false,"pushed_at":"2021-12-10T09:41:32.000Z","size":692,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-11T12:17:04.658Z","etag":null,"topics":["docsify","websequencediagrams","websequencediagrams-docsify"],"latest_commit_sha":null,"homepage":"https://aajiwani.github.io/websequencediagrams-docsify","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aajiwani.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-21T01:17:55.000Z","updated_at":"2022-03-30T04:31:41.000Z","dependencies_parsed_at":"2022-09-26T17:11:12.395Z","dependency_job_id":null,"html_url":"https://github.com/aajiwani/websequencediagrams-docsify","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aajiwani%2Fwebsequencediagrams-docsify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aajiwani%2Fwebsequencediagrams-docsify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aajiwani%2Fwebsequencediagrams-docsify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aajiwani%2Fwebsequencediagrams-docsify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aajiwani","download_url":"https://codeload.github.com/aajiwani/websequencediagrams-docsify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246403915,"owners_count":20771530,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["docsify","websequencediagrams","websequencediagrams-docsify"],"created_at":"2025-02-06T07:16:30.301Z","updated_at":"2025-03-31T02:17:43.280Z","avatar_url":"https://github.com/aajiwani.png","language":"JavaScript","readme":"[![Build Status](https://app.travis-ci.com/aajiwani/websequencediagrams-docsify.svg?branch=master)](https://app.travis-ci.com/aajiwani/websequencediagrams-docsify)\n# websequencediagrams-docsify\n\nA plugin to render web sequence diagrams -- Just like that!\n\nIt would be as simple as writing this in your markdown, and applying the javascript to it. Docsify does the rest!\n\n\u003cpre\u003e\n```websequencediagrams\n    title Foo-Bar!\n    Alice-\u003eBob: Authentication Request\n    note right of Bob: Bob thinks about it\n    Bob-\u003eAlice: Authentication Response\n```\n\u003c/pre\u003e\n\n## Impression\n\nThis is how the output looks and feel like\n\n![](assets/plugin_screenshot.png)\n\n`Take a look at the live project` present [here](https://aajiwani.github.io/websequencediagrams-docsify)\n\n---\n\n## Integration in Docsify\n\nThere could be many ways of doing it, but the easiest would be something of this nature:\n\n- Install Docsify appropriately and make sure you can run `docsify serve your_dir`\n\n- Under `index.html` of your docsify installation, add this bit to enable this plugin\n\n```html\n\u003cscript src=\"//unpkg.com/websequencediagrams-docsify@2.0.1/dist/docsify-websequencediagrams.js\"\u003e\u003c/script\u003e\n```\n\n- Your end result would look something like this:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e ... \u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n  \u003cscript\u003e\n    window.$docsify = {\n      name: '',\n      repo: ''\n    }\n  \u003c/script\u003e\n  \u003cscript src=\"//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"//unpkg.com/websequencediagrams-docsify@2.0.1/dist/docsify-websequencediagrams.js\"\u003e\u003c/script\u003e\n  ...\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n- You are now ready to consume websequence diagrams\n\n- Add a `markdown` file within your docsify space stated below, and feel the magic!\n\n\u003cpre\u003e\n```websequencediagrams\n\ntitle Foo-Bar!\n\nAlice-\u003eBob: Authentication Request\nnote right of Bob: Bob thinks about it\nBob-\u003eAlice: Authentication Response\n\n```\n\u003c/pre\u003e\n\n## Ways of running\n\nMake sure you have `node` appropriately installed and either `npm` or `yarn` is available to you.\n\n1. `yarn`\n2. `yarn example \u0026`\n3. `yarn local_tests`\n\n## References\n\nInspiration [project](https://github.com/Leward/mermaid-docsify)","funding_links":[],"categories":["Plugins"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faajiwani%2Fwebsequencediagrams-docsify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faajiwani%2Fwebsequencediagrams-docsify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faajiwani%2Fwebsequencediagrams-docsify/lists"}