{"id":17028385,"url":"https://github.com/bennycode/diagram-dsl","last_synced_at":"2026-03-10T07:02:22.465Z","repository":{"id":22631013,"uuid":"25973664","full_name":"bennycode/diagram-dsl","owner":"bennycode","description":"Library for easily drawing UML diagrams with JavaScript and \"js-sequence-diagrams\".","archived":false,"fork":false,"pushed_at":"2015-01-06T15:29:02.000Z","size":759,"stargazers_count":10,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-08T15:01:34.383Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://bennycode.com/diagram-dsl/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bennycode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-10-30T14:08:48.000Z","updated_at":"2025-02-02T21:40:18.000Z","dependencies_parsed_at":"2022-08-20T21:50:51.190Z","dependency_job_id":null,"html_url":"https://github.com/bennycode/diagram-dsl","commit_stats":null,"previous_names":["welovecoding/diagram-dsl","welovecoding/diagrams-dsl"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bennycode%2Fdiagram-dsl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bennycode%2Fdiagram-dsl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bennycode%2Fdiagram-dsl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bennycode%2Fdiagram-dsl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bennycode","download_url":"https://codeload.github.com/bennycode/diagram-dsl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248565074,"owners_count":21125417,"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":[],"created_at":"2024-10-14T07:53:57.796Z","updated_at":"2025-12-12T04:21:12.799Z","avatar_url":"https://github.com/bennycode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Diagram.DSL\n\n**Diagram.DSL** adds some nice convenience methods to the famous [**JS Sequence Diagrams**](https://github.com/bramp/js-sequence-diagrams) library by [Andrew Brampton](https://github.com/bramp), which turns text into UML sequence diagrams. \n\nWith **Diagram.DSL**, you can use code statements instead of string commands, to draw your sequence diagrams. It also gives you the possibility to save your sequence diagram as a PNG image.\n\n## :star2: Advantages :star2:\n- Fully compatible with [JS Sequence Diagrams syntax](http://bramp.github.io/js-sequence-diagrams/)\n- IDE **Autocompletion** for writing sequence commands\n- Easy renaming of names and actions with **variables**\n- Possibility to save your diagram as a **bitmap image** (PNG)\n- Possibility to **dynamically** create your sequences\n\n## Introduction\n\n### 1. Add JavaScript libraries\n\n```html\n\u003cscript src=\"/lib/underscore/underscore.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/lib/raphael/raphael.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/lib/js-sequence-diagrams/build/sequence-diagram-min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/dist/js/diagram-dsl.js\"\u003e\u003c/script\u003e\n```\n\n### 2. Add a DOM element\n\n```html\n\u003cdiv id=\"diagram\"\u003e\u003c/div\u003e\n\n```\n\n### 3. Draw your diagram\n\n```js\n// Setup diagram\nvar element = document.getElementById('diagram');\nvar diagram = new Diagram.DSL.SequenceDiagram();\ndiagram.renderTo(element);\n\n// Draw a path\nDiagram.DSL.from('A').lineTo('B').withText('Hello').on(diagram);\n```\n\n### 4. There is no step four!\n\nJust look at your result:\n\n![Result](http://welovecoding.github.io/diagram-dsl/readme/intro-1.png)\n\n## Do more with it\n\n### Add more paths\n\nIf you want to add another line to your diagram, then just draw a second path:\n\n```js\n// Draw another path\nDiagram.DSL.from('A').lineTo('C').withText('World').on(diagram);\n```\n\n![Result](http://welovecoding.github.io/diagram-dsl/readme/intro-2.png)\n\nYou can also add a third one, which would make it to:\n\n```js\nvar element = document.getElementById('diagram');\nvar diagram = new Diagram.DSL.SequenceDiagram();\ndiagram.renderTo(element);\n\nDiagram.DSL.from('A').lineTo('B').withText('Hello').on(diagram);\nDiagram.DSL.from('A').lineTo('C').withText('World').on(diagram);\nDiagram.DSL.from('A').lineTo('D').withText('!').on(diagram);\n```\n\n![Result](http://welovecoding.github.io/diagram-dsl/readme/intro-3.png)\n\n### Draw dashed lines\n\nYou can use `dashTo` instead of `lineTo` if you want to draw dashed lines:\n\n```js\nDiagram.DSL.from('A').lineTo('B').withText('Hello').on(diagram);\nDiagram.DSL.from('A').lineTo('C').withText('World').on(diagram);\nDiagram.DSL.from('A').dashTo('D').withText('!').on(diagram);\n```\n\n![Result](http://welovecoding.github.io/diagram-dsl/readme/intro-4.png)\n\n## Draw open arrows\n\nIf you want to have an opened arrow instead of a filled one, then use the `andOpenArrow()` function after calling `withText`. It would look like this:\n\n```js\nDiagram.DSL.from('A').lineTo('B').withText('Hello').on(diagram);\nDiagram.DSL.from('A').lineTo('C').withText('World').andOpenArrow().on(diagram);\nDiagram.DSL.from('A').dashTo('D').withText('!').on(diagram);\n```\n\nCheck how the arrow of the second path is renderd:\n\n![Result](http://welovecoding.github.io/diagram-dsl/readme/intro-5.png)\n\n## Add title\n\nIf you want to have a title for your diagram, then you should have a title. Just instantiate your diagram object with a `String` literal:\n\n```js\nvar diagram = new Diagram.DSL.SequenceDiagram('My Diagram');\n```\n\nYou will get something like this:\n\n![Result](http://welovecoding.github.io/diagram-dsl/readme/intro-6.png)\n\n## Change theme\n\nUh, did we mention, that you can draw your diagram in a different style? At the moment we support `Theme.HAND_DRAWN` and `Theme.DEFAULT`. You used already the default theme, so let's see how the hand-drawn theme looks like:\n\n```js\nvar diagram = new Diagram.DSL.SequenceDiagram('My Diagram', Diagram.DSL.Theme.HAND_DRAWN);\n```\n\n![Result](http://welovecoding.github.io/diagram-dsl/readme/intro-7.png)\n\nIf you want to switch back, just use:\n\n\n```js\nvar diagram = new Diagram.DSL.SequenceDiagram('My Diagram', Diagram.DSL.Theme.DEFAULT);\n```\n\nOr even simpler:\n\n```js\nvar diagram = new Diagram.DSL.SequenceDiagram('My Diagram');\n```\n\n## Draw with statement collection\n\nYou can also define your drawing statements before rendering the diagram. But first let's see how our sample code looks like at the moment:\n\n```js\nvar element = document.getElementById('diagram');\nvar diagram = new Diagram.DSL.SequenceDiagram('My Diagram', Diagram.DSL.Theme.HAND_DRAWN);\ndiagram.renderTo(element);\n\nDiagram.DSL.from('A').lineTo('B').withText('Hello').on(diagram);\nDiagram.DSL.from('A').lineTo('C').withText('World').andOpenArrow().on(diagram);\nDiagram.DSL.from('A').dashTo('D').withText('!').on(diagram);\n```\n\nWe can easily turn the above code into this one:\n\n```js\n// Create diagram\nvar element = document.getElementById('diagram');\nvar diagram = new Diagram.DSL.SequenceDiagram('My Diagram', Diagram.DSL.Theme.HAND_DRAWN);\n\n// Define paths\ndiagram.sequences = [\nDiagram.DSL.from('A').lineTo('B').withText('Hello'),\nDiagram.DSL.from('A').lineTo('C').withText('World').andOpenArrow(),\nDiagram.DSL.from('A').dashTo('D').withText('!')\n];\n\n// Render diagram\ndiagram.renderTo(element);\n```\n\nThe difference is now, that you initialize the `sequences` array instead of writing single statements to draw the path.\n\nYou can also combine the `sequences` approach with the statements approach. So let us add a fourth path:\n\n```js\n// Create diagram\nvar element = document.getElementById('diagram');\nvar diagram = new Diagram.DSL.SequenceDiagram('My Diagram', Diagram.DSL.Theme.HAND_DRAWN);\n\n// Define paths\ndiagram.sequences = [\nDiagram.DSL.from('A').lineTo('B').withText('Hello'),\nDiagram.DSL.from('A').lineTo('C').withText('World').andOpenArrow(),\nDiagram.DSL.from('A').dashTo('D').withText('!')\n];\n\n// Render diagram\ndiagram.renderTo(element);\n\n// Add another path and automatically render the update\nDiagram.DSL.from('D').lineTo('A').withText('Return').on(diagram);\n```\n\nThe result will be:\n\n![Result](http://welovecoding.github.io/diagram-dsl/readme/intro-8.png)\n\n## Variables\n\nNow that we have `A`, `B`, `C` and `D` it's time to use variables to easily rename those paths. Let's do it:\n\n```js\nvar a = 'A';\nvar b = 'B';\nvar c = 'C';\nvar d = 'D';\n\nvar element = document.getElementById('diagram');\nvar diagram = new Diagram.DSL.SequenceDiagram('My Diagram', Diagram.DSL.Theme.HAND_DRAWN);\ndiagram.renderTo(element);\n\nDiagram.DSL.from(a).lineTo(b).withText('Hello').on(diagram);\nDiagram.DSL.from(a).lineTo(c).withText('World').on(diagram);\nDiagram.DSL.from(a).dashTo(d).withText('!').on(diagram);\nDiagram.DSL.from(d).lineTo(a).withText('Return').on(diagram);\n```\n\nUsing variables is quite comfortable, because we can rename every actor in our diagram in seconds:\n\n```js\nvar a = 'Bart';\nvar b = 'Homer';\nvar c = 'Lisa';\nvar d = 'Marge';\n\nvar element = document.getElementById('diagram');\nvar diagram = new Diagram.DSL.SequenceDiagram('My Diagram', Diagram.DSL.Theme.HAND_DRAWN);\ndiagram.renderTo(element);\n\nDiagram.DSL.from(a).lineTo(b).withText('Hello').on(diagram);\nDiagram.DSL.from(a).lineTo(c).withText('World').on(diagram);\nDiagram.DSL.from(a).dashTo(d).withText('!').on(diagram);\nDiagram.DSL.from(d).lineTo(a).withText('Return').on(diagram);\n```\n\nIn the blink of an eye, we got this:\n\n![Result](http://welovecoding.github.io/diagram-dsl/readme/intro-9.png)\n\n\n## Save diagram as bitmap image (PNG)\n\nNow that you learned almost everything about **Diagram.DSL**, it's time to save your diagram as a PNG image. Simply do:\n\n```js\ndiagram.saveAsPng();\n```\n\nThat's it! Your browser will ask you where to save the image.\n\n## Render from inline statements\n\nIf you need full support of all statements possible in [js-sequence-diagrams](http://bramp.github.io/js-sequence-diagrams/), then we have the solution for you! \n\nYou can use all features (such `participant` and `Note`) when using the `renderFrom` method.\n\n```html\n\u003c!-- HTML --\u003e\n\u003cdiv id=\"diagram\"\u003e\n  participant C\n  participant B\n  participant A\n  Note right of A: By listing the participants\\n you can change their order\n\u003c/div\u003e\n\n\u003c!-- JavaScript --\u003e\n\u003cscript\u003e\n  var element = document.getElementById('diagram');\n  var diagram = new Diagram.DSL.SequenceDiagram();\n  diagram.renderFrom(element);\n\u003c/script\u003e\n```\n\n![Result](http://welovecoding.github.io/diagram-dsl/readme/intro-10.png)\n\n## Drop Diagram.DSL namespace\n\nIn our examples, we made much use of the `Diagram.DSL.` syntax. You can drop it, using the `with` keyword in JavaScript. Your code can then look like this:\n\n```js\nvar a = 'Bart';\nvar b = 'Homer';\nvar c = 'Lisa';\nvar d = 'Marge';\n\nwith (window.Diagram.DSL) {\n\n  var element = document.getElementById('diagram');\n  var diagram = new SequenceDiagram('My Diagram', Theme.HAND_DRAWN);\n  diagram.renderTo(element);\n\n  from(a).lineTo(b).withText('Hello').on(diagram);\n  from(a).lineTo(c).withText('World').on(diagram);\n  from(a).dashTo(d).withText('!').on(diagram);\n  from(d).lineTo(a).withText('Return').on(diagram);\n\n}\n```\n\nIsn't that cool!?  \n\nSo, we wish you lots of fun with our library. \nDon't hasitate to ask question about it or write feature request.\n\n## Build \u0026 run the project\n\nIf you want to extend **Diagram.DSL** or contribute to the project, then you need to build it first. To resolve all the Node.JS and Bower modules, you have to run these commands from the project's directory:\n\n```bash\nnpm install\ngrunt module-first-run\n```\n\nYou only need to do the previous step once (or when new dependencies are added to the project). After that you can just go with:\n\n```\ngrunt default\n```\n\nOr even simpler:\n\n```\ngrunt\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbennycode%2Fdiagram-dsl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbennycode%2Fdiagram-dsl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbennycode%2Fdiagram-dsl/lists"}