{"id":19014250,"url":"https://github.com/spritejs/sprite-extend-dagre","last_synced_at":"2025-04-23T00:43:04.137Z","repository":{"id":87731596,"uuid":"160494271","full_name":"spritejs/sprite-extend-dagre","owner":"spritejs","description":"Draws simple flow chart diagrams with spritejs. Powered by dagre.js.","archived":false,"fork":false,"pushed_at":"2022-08-23T09:54:55.000Z","size":309,"stargazers_count":27,"open_issues_count":1,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-23T00:42:58.444Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/spritejs.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-05T09:34:24.000Z","updated_at":"2024-10-22T14:10:43.000Z","dependencies_parsed_at":"2023-04-11T03:46:18.777Z","dependency_job_id":null,"html_url":"https://github.com/spritejs/sprite-extend-dagre","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-extend-dagre","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-extend-dagre/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-extend-dagre/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-extend-dagre/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spritejs","download_url":"https://codeload.github.com/spritejs/sprite-extend-dagre/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250348892,"owners_count":21415907,"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-11-08T19:28:34.439Z","updated_at":"2025-04-23T00:43:04.121Z","avatar_url":"https://github.com/spritejs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sprite-Dagre\n\nDraws simple flow chart diagrams with spritejs. Powered by [Dagre](https://github.com/dagrejs/dagre) and [Rough.js](https://github.com/pshihn/rough). Inspired by [MermaidJS](https://mermaidjs.github.io).\n\n## Usage\n\n[CodePen](https://codepen.io/akira-cn/pen/ebYjYX)\n\n```html\n\u003cscript src=\"https://unpkg.com/spritejs/dist/spritejs.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/sprite-extend-rough/dist/sprite-extend-rough.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/sprite-extend-dagre/dist/sprite-extend-dagre.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nconst {Scene, Dagre} = spritejs;\n\nconst scene = new Scene('#container', {\n  viewport: 'auto',\n  resolution: 'flex',\n  useDocumentCSS: true,\n});\n\nconst fglayer = scene.layer('fglayer');  \nconst dagreGroup = new Dagre({\n  pos: fglayer.center,\n  anchor: 0.5,\n  lineWidth: 5,\n});\nfglayer.append(dagreGroup);\n\ndagreGroup.layoutGraph(`\n  graph TB\n    A-\u003eB~~D\n    B~\u003eC\n`);\n\u003c/script\u003e\n```\n\n\u003cimg src=\"https://p1.ssl.qhimg.com/t0121a97aee1b4b8929.jpg\" width=\"400px\"\u003e\n\n## Flow charts\n\n**Graph [direction]** declares a new graph and the direction of the graph layout.\n\nPossible directions are:\n\n- TB - top bottom (default)\n- BT - bottom top\n- RL - right left\n- LR - left right\n\n```js\ndagreGroup.layoutGraph(`\n  graph LR\n    A-\u003eB~~D\n    B~\u003eC\n`);\n```\n\nThis declares a graph oriented from left to right.\n\n\u003cimg src=\"https://p3.ssl.qhimg.com/t01536d749b34f81c4e.jpg\" width=\"400px\"\u003e\n\n### Nodes \u0026 Shapes\n\n#### A node (default)\n\n```js\ndagreGroup.layoutGraph(`\n  graph LR\n    id\n`);\n```\n\n\u003cimg src=\"https://p2.ssl.qhimg.com/t0146e72f3598e94457.jpg\" width=\"400px\"\u003e\n\n#### A node with text\n\n```js\ndagreGroup.layoutGraph(`\n  graph LR\n    id1[This is the text in the box]\n`);\n```\n\n\u003cimg src=\"https://p3.ssl.qhimg.com/t01efd985c1b5182cde.jpg\" width=\"400px\"\u003e\n\n#### A node with round edges\n\n```js\ndagreGroup.layoutGraph(`\n  graph LR\n    id1(This is the text in the box)\n`);\n```\n\n\u003cimg src=\"https://p1.ssl.qhimg.com/t01f6d90cab869c2bfd.jpg\" width=\"400px\"\u003e\n\n#### A node in the form of an ellipse\n\n```js\ndagreGroup.layoutGraph(`\n  graph LR\n    id1((This is the text in the ellipse))\n`);\n```\n\n\u003cimg src=\"https://p4.ssl.qhimg.com/t010d7369c05d30786b.jpg\" width=\"400px\"\u003e\n\n#### A node (rhombus)\n\n```js\ndagreGroup.layoutGraph(`\n  graph LR\n    id1\u003cThis is the text in the box\u003e\n`);\n```\n\n\u003cimg src=\"https://p2.ssl.qhimg.com/t01a42a4bdf1e02a702.jpg\" width=\"400px\"\u003e\n\n#### A node (parallelogram)\n\n```js\ndagreGroup.layoutGraph(`\n  graph LR\n    id1/This is the text in the box/\n`);\n```\n\n\u003cimg src=\"https://p1.ssl.qhimg.com/t018f6d7992b4657e0e.jpg\" width=\"400px\"\u003e\n\n#### A user defined node\n\n```js\ndagreGroup.layoutGraph(`\n  graph LR\n    id1!star\n`, {\n  star() {\n    const star = new Star();\n    star.attr({\n      radius: 100,\n      color: 'red',\n      angles: 5,\n      fillColor: 'red',\n    });\n    return star;\n  },\n});\n```\n\n\u003cimg src=\"https://p0.ssl.qhimg.com/t01db81939c05dc0a18.jpg\" width=\"400px\"\u003e\n\n### Links between nodes\n\n#### A link with arrow head\n\n```js\ndagreGroup.layoutGraph(`\n  graph LR\n    A-\u003eB\n`);\n```\n\n\u003cimg src=\"https://p5.ssl.qhimg.com/t01c4bf673fec262557.jpg\" width=\"400px\"\u003e\n\n#### An open link\n\n```js\ndagreGroup.layoutGraph(`\n  graph LR\n    A--B\n`);\n```\n\n\u003cimg src=\"https://p3.ssl.qhimg.com/t01426f4dc668465bfc.jpg\" width=\"400px\"\u003e\n\n#### A dashed link\n\n```js\ndagreGroup.layoutGraph(`\n  graph LR\n    A~\u003eB\n`);\n```\n\n\u003cimg src=\"https://p0.ssl.qhimg.com/t010c7071d05403af62.jpg\" width=\"400px\"\u003e\n\n#### A dashed open link\n\n```js\ndagreGroup.layoutGraph(`\n  graph LR\n    A~~B\n`);\n```\n\n\u003cimg src=\"https://p1.ssl.qhimg.com/t01f3c9315b1b418cfc.jpg\" width=\"400px\"\u003e\n\n#### A link with text\n\n```js\ndagreGroup.layoutGraph(`\n  graph LR\n    A-\u003eB{\"Link text\"}\n`);\n```\n\n\u003cimg src=\"https://p2.ssl.qhimg.com/t019761e7d42ea76eaf.jpg\" width=\"400px\"\u003e\n\n#### A link with colored text\n\n```js\ndagreGroup.layoutGraph(`\n  graph LR\n    A-\u003eB{\"Link text\" red}\n`);\n```\n\n\u003cimg src=\"https://p0.ssl.qhimg.com/t01f621d310cd55048c.jpg\" width=\"400px\"\u003e\n\n### Demo\n\n[CodePen](https://codepen.io/akira-cn/pen/QzWZdv)\n\n```js\nconst {Scene, Dagre} = spritejs;\n\nconst scene = new Scene('#container', {\n  viewport: 'auto',\n  resolution: 'flex',\n  useDocumentCSS: true,\n});\n\nconst fglayer = scene.layer('fglayer');  \nconst dagreGroup = new Dagre({\n  pos: fglayer.center,\n  lineWidth: 5,\n  anchor: 0.5,\n});\nfglayer.append(dagreGroup);\n\ndagreGroup.layoutGraph(`\n  graph TB\n    start((S))\n    step1[proceed]\n    step2\u003cdecision?\u003e\n    step3/read file/\n    step4(done)\n    start-\u003estep1-\u003estep2\n    step2~\u003estep4{no}\n    step2-\u003estep3{yes}\n    step3-\u003estep4\n`);\n```\n\n\u003cimg src=\"https://p3.ssl.qhimg.com/t01b0894a9cfbb7cdd8.jpg\" width=\"400px\"\u003e\n\n### Styling nodes \u0026 links\n\n[CodePen](https://codepen.io/akira-cn/pen/madzMJ)\n\n```css\n#step1 {\n  --sprite-fillColor: red;\n  --sprite-labelBg: white;\n}\n\n#step2 {\n  --sprite-strokeColor: blue;\n  --sprite-labelColor: red;\n}\n\ndagreedge[connection=\"[step1,step2]\"] {\n  --sprite-strokeColor: green;\n}\n```\n\n```js\nconst {Scene, Dagre} = spritejs;\n\nconst scene = new Scene('#container', {\n  viewport: 'auto',\n  resolution: 'flex',\n  useDocumentCSS: true,\n});\n\nconst fglayer = scene.layer('fglayer');  \nconst dagreGroup = new Dagre({\n  pos: fglayer.center,\n  lineWidth: 5,\n  anchor: 0.5,\n});\nfglayer.append(dagreGroup);\n\ndagreGroup.layoutGraph(`\n  graph TB\n    start((S))\n    step1[proceed]\n    step2\u003cdecision?\u003e\n    step3/read file/\n    step4(done)\n    start-\u003estep1-\u003estep2\n    step2~\u003estep4{no}\n    step2-\u003estep3{yes}\n    step3-\u003estep4\n`);\n```\n\n\u003cimg src=\"https://p5.ssl.qhimg.com/t01846d1238f44ea7e7.jpg\" width=\"400px\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspritejs%2Fsprite-extend-dagre","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspritejs%2Fsprite-extend-dagre","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspritejs%2Fsprite-extend-dagre/lists"}