{"id":15415887,"url":"https://github.com/davidje13/sequencediagram","last_synced_at":"2025-05-08T23:49:00.905Z","repository":{"id":41247915,"uuid":"107915048","full_name":"davidje13/SequenceDiagram","owner":"davidje13","description":"Javascript tool for generating sequence diagrams from code","archived":false,"fork":false,"pushed_at":"2023-03-20T01:22:07.000Z","size":8099,"stargazers_count":126,"open_issues_count":7,"forks_count":38,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-08T23:48:52.722Z","etag":null,"topics":["editor","online","sequence-diagram"],"latest_commit_sha":null,"homepage":"https://sequence.davidje13.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davidje13.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"docs/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-23T00:47:59.000Z","updated_at":"2025-04-14T08:22:45.000Z","dependencies_parsed_at":"2024-10-21T15:39:26.520Z","dependency_job_id":null,"html_url":"https://github.com/davidje13/SequenceDiagram","commit_stats":{"total_commits":268,"total_committers":1,"mean_commits":268.0,"dds":0.0,"last_synced_commit":"b68596cdf230c58df83fd27a6480f3645714310b"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidje13%2FSequenceDiagram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidje13%2FSequenceDiagram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidje13%2FSequenceDiagram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidje13%2FSequenceDiagram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidje13","download_url":"https://codeload.github.com/davidje13/SequenceDiagram/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253166479,"owners_count":21864467,"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":["editor","online","sequence-diagram"],"created_at":"2024-10-01T17:10:05.326Z","updated_at":"2025-05-08T23:49:00.881Z","avatar_url":"https://github.com/davidje13.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SVG Sequence Diagram\n\nA tool for creating sequence diagrams from a Domain-Specific Language.\nRuns in nodejs and browsers.\n\n[See it in action in the online editor](https://sequence.davidje13.com/)\n\nThe core rendering capability is also available as a library:\n\n```shell\nnpm install --save svg-sequence-diagram\n```\n\n```javascript\nimport { SequenceDiagram } from 'svg-sequence-diagram';\n\nconst myDiagram = new SequenceDiagram(`\ntitle Foo\nA -\u003e B\nB -\u003e A\n`);\n\ndocument.body.appendChild(myDiagram.dom());\n```\n\n[See here for full API documentation](https://sequence.davidje13.com/library.htm).\n\nOr generate SVGs from the commandline:\n\n```shell\nnpx svg-sequence-diagram \u003c source.txt \u003e diagram.svg\n```\n\n## Examples\n\n### Simple Usage\n\n\u003cimg src=\"screenshots/SimpleUsage.png\" alt=\"Simple Usage preview\" width=\"200\" align=\"right\" /\u003e\n\n```\ntitle Labyrinth\n\nBowie -\u003e Goblin: You remind me of the babe\nGoblin -\u003e Bowie: What babe?\nBowie -\u003e Goblin: The babe with the power\nGoblin -\u003e Bowie: What power?\nnote right of Bowie, Goblin: Most people get muddled here!\nBowie -\u003e Goblin: \"The power of voodoo\"\nGoblin -\u003e Bowie: \"Who-do?\"\nBowie -\u003e Goblin: You do!\nGoblin -\u003e Bowie: Do what?\nBowie -\u003e Goblin: Remind me of the babe!\n\nBowie -\u003e Audience: Sings\n\nterminators box\n```\n\n### Connection Types\n\n\u003cimg src=\"screenshots/ConnectionTypes.png\" alt=\"Connection Types preview\" width=\"200\" align=\"right\" /\u003e\n\n```\ntitle Connection Types\n\nbegin Foo, Bar, Baz\n\nFoo -\u003e Bar: Simple arrow\nBar --\u003e Baz: Dashed arrow\nFoo \u003c- Bar: Reversed arrow\nBar \u003c-- Baz: Reversed \u0026 dashed\nFoo \u003c-\u003e Bar: Double arrow\nBar \u003c--\u003e Baz: Double dashed arrow\n\n# An arrow with no label:\nFoo -\u003e Bar\n\nBar -\u003e\u003e Baz: Different arrow\nFoo \u003c\u003c--\u003e Bar: Mix of arrows\n\nBar -\u003e Bar: Bar talks to itself\n\nFoo -\u003e +Bar: Foo asks Bar\n-Bar --\u003e Foo: and Bar replies\n\nBar -x Baz: Lost message\n\n# Arrows leaving on the left and right of the diagram\n[ -\u003e Foo: From the left\n[ \u003c- Foo: To the left\nFoo -\u003e ]: To the right\nFoo \u003c- ]: From the right\n[ ~\u003e ]: Wavy left to right!\n# (etc.)\n```\n\n### Dividers\n\n\u003cimg src=\"screenshots/Dividers.png\" alt=\"Dividers preview\" width=\"200\" align=\"right\" /\u003e\n\n```\ntitle Dividers\n\nbegin Foo, Bar, Baz\n\nFoo -\u003e +Bar\n\ndivider\n\nBar -\u003e +Baz\n\ndivider delay: This takes a while\n\n-Baz --\u003e Bar\n\ndivider tear with height 20: Lots of stuff happens\n\n-Bar --\u003e Foo\n```\n\n### Notes \u0026 State\n\n\u003cimg src=\"screenshots/NotesAndState.png\" alt=\"Notes and State preview\" width=\"200\" align=\"right\" /\u003e\n\n```\ntitle Note Placements\n\nbegin Foo, Bar\n\nnote over Foo: Foo says something\nnote left of Foo: Stuff\nnote right of Bar: More stuff\nnote over Foo, Bar: \"Foo and Bar\non multiple lines\"\nnote between Foo, Bar: Link\n\n# in long diagrams, we can add reminders of which agent is which:\nrelabel\n\ntext right: \"Comments\\nOver here!\"\n\nstate over Foo: Foo is ponderous\n```\n\n### Logic\n\n\u003cimg src=\"screenshots/Logic.png\" alt=\"Logic preview\" width=\"200\" align=\"right\" /\u003e\n\n```\ntitle At the Bank\n\nbegin Person, ATM, Bank\nPerson -\u003e ATM: Request money\nATM -\u003e Bank: Check funds\nif fraud detected\n  Bank -\u003e Police: \"Get 'em!\"\n  Police -\u003e Person: \"You're nicked\"\n  end Police\nelse if sufficient funds\n  ATM -\u003e Bank: Withdraw funds\n  repeat until \"all requested money\n                has been handed over\"\n    ATM -\u003e Person: Dispense note\n  end\nelse\n  ATM -\u003e Person: Error\nend\n```\n\n### Label Templates\n\n\u003cimg src=\"screenshots/LabelTemplates.png\" alt=\"Label Templates preview\" width=\"200\" align=\"right\" /\u003e\n\n```\nautolabel \"[\u003cinc\u003e] \u003clabel\u003e\"\n\nbegin \"Underpants\\nGnomes\" as A\nA \u003c- ]: Collect underpants\nA \u003c-\u003e ]: ???\nA \u003c- ]: Profit!\n```\n\n### Multiline Text\n\n\u003cimg src=\"screenshots/MultilineText.png\" alt=\"Multiline Text preview\" width=\"200\" align=\"right\" /\u003e\n\n```\ntitle \"My Multiline\nTitle\"\n\nbegin Foo, Bar\n\nnote over Foo: \"Also possible\\nwith escapes\"\n\nFoo -\u003e Bar: \"Lines of text\\non this arrow\"\n\nif \"Even multiline\\ninside conditions like this\"\n  Foo -\u003e \"Multiline\\nagent\"\nend\n\nstate over Foo: \"Newlines here,\ntoo!\"\n```\n\n### Themes\n\n\u003cimg src=\"screenshots/Themes.png\" alt=\"Themes preview\" width=\"200\" align=\"right\" /\u003e\n\n```\ntheme sketch\n\ntitle Mockup\n\nA thing -\u003e +Another thing: Something happens\n-Another thing --\u003e A thing: With some response\nnote right of Another thing: Find out what happens here\nend Another thing\n```\n\n### Short-Lived Agents\n\n\u003cimg src=\"screenshots/ShortLivedAgents.png\" alt=\"Short Lived Agents preview\" width=\"200\" align=\"right\" /\u003e\n\n```\ntitle \"Baz doesn't live long\"\n\nnote over Foo, Bar: Using begin / end\n\nbegin Baz\nBar -\u003e Baz\nBaz -\u003e Foo\nend Baz\n\nnote over Foo, Bar: Using * / !\n\n# * and ! cause agents to be\n# created and destroyed inline\nBar -\u003e *Baz: make Baz\nFoo \u003c- !Baz: end Baz\n\n# Foo and Bar end with black bars\nterminators bar\n# (options are: box, bar, cross, fade, none)\n```\n\n### Agent Aliases\n\n\u003cimg src=\"screenshots/AgentAliases.png\" alt=\"Agent Aliases preview\" width=\"200\" align=\"right\" /\u003e\n\n```\ndefine My complicated agent name as A\ndefine \"Another agent name,\nand this one's multi-line!\" as B\n\nA -\u003e B: this is much easier\nA \u003c- B: than writing the whole name\n```\n\n### Markdown\n\n\u003cimg src=\"screenshots/Markdown.png\" alt=\"Markdown preview\" width=\"200\" align=\"right\" /\u003e\n\n```\ndefine \"Name with\n**bold** and _italic_\" as A\ndefine \"Also `code`\nand ~strikeout~\" as B\n\nA -\u003e B: \"_**basic markdown\nis supported!**_\"\n```\n\n### Alternative Agent Ordering\n\n\u003cimg src=\"screenshots/AlternativeAgentOrdering.png\" alt=\"Alternative Agent Ordering preview\" width=\"200\" align=\"right\" /\u003e\n\n```\ndefine Baz, Foo\n\nFoo -\u003e Bar\nBar -\u003e Baz\n```\n\n### Agent Types\n\n\u003cimg src=\"screenshots/AgentTypes.png\" alt=\"Agent Types preview\" width=\"200\" align=\"right\" /\u003e\n\n```\nbegin User, Application, PostgreSQL\n\nUser -\u003e +Application\nApplication -\u003e +PostgreSQL\n-PostgreSQL --\u003e Application\n-Application --\u003e User\n\nUser is a person\nPostgreSQL is a database\n```\n\n### Asynchronous Communication\n\n\u003cimg src=\"screenshots/AsynchronousCommunication.png\" alt=\"Asynchronous Communication preview\" width=\"200\" align=\"right\" /\u003e\n\n```\nbegin Initiator as I, Receiver as R\n\n# the '...id' syntax allows connections\n# to span multiple lines\n\nI -\u003e ...fin1\n...fin1 -\u003e R: FIN\n\n# they can even inter-mix!\nR -\u003e ...ack1\nR -\u003e ...fin2\n...ack1 -\u003e I: ACK\n...fin2 -\u003e I: FIN\n\n!I -\u003e ...ack2\n...ack2 -\u003e !R: ACK\n```\n\n### Simultaneous Actions (Beta!)\n\nThis is a work-in-progress feature. There are situations where this can\nlead to [ugly / unreadable overlapping content](https://github.com/davidje13/SequenceDiagram/issues/13).\n\n\u003cimg src=\"screenshots/SimultaneousActions.png\" alt=\"Simultaneous Actions preview\" width=\"200\" align=\"right\" /\u003e\n\n```\nbegin A, B, C, D\nA -\u003e C\n\n# Define a marker which can be returned to later\n\nsome primary process:\nA -\u003e B\nB -\u003e A\nA -\u003e B\nB -\u003e A\n\n# Return to the defined marker\n# (should be interpreted as no-higher-then the marker; may be\n# pushed down to keep relative action ordering consistent)\n\nsimultaneously with some primary process:\nC -\u003e D\nD -\u003e C\nend D\nC -\u003e A\n\n# The marker name is optional; using \"simultaneously:\" with no\n# marker will jump to the top of the entire sequence.\n```\n\n## DSL Basics\n\nComments begin with a `#` and end at the next newline:\n\n```\n# This is a comment\n```\n\nMeta data can be provided with particular keywords:\n\n```\ntitle \"My title here\"\n```\n\nQuoting strings is usually optional, for example these are the same:\n\n```\ntitle \"My title here\"\ntitle My title here\ntitle \"My title\" here\ntitle \"My\" \"title\" \"here\"\n```\n\nEach non-metadata line represents a step in the sequence, in order.\n\n```\n# Draw an arrow from agent \"Foo Bar\" to agent \"Zig Zag\" with a label:\n# (implicitly creates the agents if they do not already exist)\n\nFoo Bar -\u003e Zig Zag: Do a thing\n\n# With quotes, this is the same as:\n\n\"Foo Bar\" -\u003e \"Zig Zag\": \"Do a thing\"\n```\n\nBlocks surround steps, and can nest:\n\n```\nif something\n  Foo -\u003e Bar\nelse if something else\n  Foo -\u003e Baz\n  if more stuff\n    Baz -\u003e Zig\n  end\nend\n```\n\n(indentation is ignored)\n\n## Running a Server\n\nIf you want to run an online renderer (like\n[https://sequence.davidje13.com/](https://sequence.davidje13.com/)),\ntake a look at\n\u003chttps://github.com/davidje13/Website/tree/master/sequence\u003e.\n\n## Contributing\n\nContributions are welcome!\n\nIf you find a bug or desire a new feature, feel free to report it in\nthe [GitHub issue tracker](https://github.com/davidje13/SequenceDiagram/issues),\nor write the code yourself and make a pull request.\n\nFor more details on contributing, see the\n[CONTRIBUTING.md file](docs/CONTRIBUTING.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidje13%2Fsequencediagram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidje13%2Fsequencediagram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidje13%2Fsequencediagram/lists"}