mermaid

[ { "tags": [], "description": { "full": "globals d3", "summary": "globals d3", "body": "" }, "isPrivate": false, "ignore": false }, { "tags": [], "description": { "full": "Created by knut on 14-11-23.", "summary": "Created by knut on 14-11-23.", "body": "" }, "isPrivate": false, "ignore": false, "code": "var sq = require('./parser/sequenceDiagram').parser;\nsq.yy = require('./sequenceDb');", "ctx": { "type": "declaration", "name": "sq", "value": "require('./parser/sequenceDiagram').parser", "string": "sq" } }, { "tags": [ { "type": "param", "types": [ "text" ], "name": "", "description": "" }, { "type": "param", "types": [ "id" ], "name": "", "description": "" } ], "description": { "full": "Draws a flowchart in the tag with id: id based on the graph definition in text.", "summary": "Draws a flowchart in the tag with id: id based on the graph definition in text.", "body": "" }, "isPrivate": false, "ignore": false, "code": "module.exports.draw = function (text, id) {\n sq.yy.clear();\n sq.parse(text);\n\n // Intial config for margins etc\n var startMargin = 50;\n var margin = 50;\n var width = 150;\n var height = 65;\n var yStartMargin = 10;\n var diagram = d3.select('#'+id);", "ctx": { "type": "method", "receiver": "module.exports", "name": "draw", "string": "module.exports.draw()" } }, { "tags": [ { "type": "param", "types": [ "center" ], "name": "-", "description": "The center of the the actor" }, { "type": "param", "types": [ "pos" ], "name": "The", "description": "position if the actor in the liost of actors" }, { "type": "param", "types": [ "description" ], "name": "The", "description": "text in the box" } ], "description": { "full": "Draws an actor in the diagram with the attaced line", "summary": "Draws an actor in the diagram with the attaced line", "body": "" }, "isPrivate": false, "ignore": false, "code": "var drawActor = function(elem, center, pos, description){\n var g = elem.append(\"g\");\n g.append(\"line\")\n .attr(\"x1\", center)\n .attr(\"y1\", yStartMargin)\n .attr(\"x2\", center)\n .attr(\"y2\", 2000)\n .attr(\"stroke-width\", '0.5px')\n .attr(\"stroke\", '#999');\n\n g.append(\"rect\")\n .attr(\"x\", startMargin + pos*margin +i*150)\n .attr(\"y\", yStartMargin)\n .attr(\"fill\", '#eaeaea')\n .attr(\"stroke\", '#666')\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"rx\", 3)\n .attr(\"ry\", 3);\n g.append(\"text\") // text label for the x axis\n .attr(\"x\", startMargin + pos*margin +i*width + 75)\n .attr(\"y\", yStartMargin+37.5)\n .style(\"text-anchor\", \"middle\")\n .text(description)\n ;\n };", "ctx": { "type": "function", "name": "drawActor", "string": "drawActor()" } }, { "tags": [], "description": { "full": "Setup arrow head and define the marker. The result is appended to the svg.", "summary": "Setup arrow head and define the marker. The result is appended to the svg.", "body": "" }, "isPrivate": false, "ignore": false, "code": "var insertArrowHead = function(elem){\n elem.append(\"defs\").append(\"marker\")\n .attr(\"id\", \"arrowhead\")\n .attr(\"refX\", 5)", "ctx": { "type": "function", "name": "insertArrowHead", "string": "insertArrowHead()" } }, { "tags": [], "description": { "full": "ust be smarter way to calculate shift", "summary": "ust be smarter way to calculate shift", "body": "" }, "isPrivate": false, "ignore": false, "code": ".attr(\"refY\", 2)\n .attr(\"markerWidth\", 6)\n .attr(\"markerHeight\", 4)\n .attr(\"orient\", \"auto\")\n .append(\"path\")\n .attr(\"d\", \"M 0,0 V 4 L6,2 Z\"); //this is actual shape for arrowhead\n };\n\n var drawMessage = function(elem, startx, stopx, verticalPos, txtCenter, msg){\n var g = elem.append(\"g\");\n //Make an SVG Container\n //Draw the line\n if(msg.type===1){\n g.append(\"line\")\n .attr(\"x1\", startx)\n .attr(\"y1\", verticalPos)\n .attr(\"x2\", stopx)\n .attr(\"y2\", verticalPos)\n .attr(\"stroke-width\", 2)\n .attr(\"stroke\", \"black\")\n .style(\"stroke-dasharray\", (\"3, 3\"))\n .attr(\"class\", \"link\")\n .attr(\"marker-end\", \"url(#arrowhead)\");\n //.attr(\"d\", diagonal);\n }\n else{\n g.append(\"line\")\n .attr(\"x1\", startx)\n .attr(\"y1\", verticalPos)\n .attr(\"x2\", stopx)\n .attr(\"y2\", verticalPos)\n .attr(\"stroke-width\", 2)\n .attr(\"stroke\", \"black\")\n .attr(\"class\", \"link\")\n .attr(\"marker-end\", \"url(#arrowhead)\");\n //.attr(\"d\", diagonal);\n }\n\n g.append(\"text\") // text label for the x axis\n .attr(\"x\", txtCenter)\n .attr(\"y\", verticalPos-10)\n .style(\"text-anchor\", \"middle\")\n .text(msg.message);\n };\n\n // Fetch data from the parsing\n var actors = sq.yy.getActors();\n var actorKeys = sq.yy.getActorKeys();\n var messages = sq.yy.getMessages();\n\n var i, maxX = 0;\n\n // Draw the actors\n for(i=0;i<actorKeys.length;i++){\n var key = actorKeys[i];\n\n // Add some rendering data to the object\n actors[key].x = startMargin + i*margin +i*150;\n actors[key].y = yStartMargin;\n actors[key].width = yStartMargin;\n actors[key].height = yStartMargin;\n\n var center = actors[key].x + (width/2);\n\n // Keep track of width for with setting on the svg\n maxX = Math.max(maxX,actors[key].x);\n\n // Draw the box with the attached line\n drawActor(diagram, center,i, actors[key].description);\n }\n maxX = maxX + width;\n\n\n // The arrow head definition is attached to the svg once\n insertArrowHead(diagram);\n\n // Draw the messages/signals\n var verticalPos = startMargin + 30;\n messages.forEach(function(msg){\n\n verticalPos = verticalPos + 40;\n var startx = actors[msg.from].x + width/2;\n var stopx = actors[msg.to].x + width/2;\n var txtCenter = startx + (stopx-startx)/2;\n drawMessage(diagram, startx, stopx, verticalPos, txtCenter, msg);\n\n });\n\n diagram.attr(\"height\", verticalPos + 40);\n diagram.attr(\"width\", maxX );\n};" } ]