Skip to content

Instantly share code, notes, and snippets.

@joegaffey
Last active July 13, 2023 00:42
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save joegaffey/c43e66b04d11f82342fa1ffd7d6688f9 to your computer and use it in GitHub Desktop.
Save joegaffey/c43e66b04d11f82342fa1ffd7d6688f9 to your computer and use it in GitHub Desktop.
D3.js sequence diagram
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Sequence Diagram</title>
</head>
<body>
<div id="drawArea"></div>
<script id="jsbin-javascript">
(function() {
var classes = ["Class A", "Class B", "Class C", "Class D", "Class E", "Class F", "Class G"];
var messages = [{start: 0, end: 2, message: "From A to C"},
{start: 2, end: 3, message: "From C to D"},
{start: 3, end: 4, message: "From D to E"},
{start: 4, end: 3, message: "From E to D"},
{start: 3, end: 6, message: "From D to G"},
{start: 6, end: 3, message: "From G to D"},
{start: 3, end: 2, message: "From D to C"},
{start: 2, end: 0, message: "From C to A"}];
var XPAD = 50;
var YPAD = 20;
var VERT_SPACE = 100;
var VERT_PAD = 60;
var CLASS_WIDTH = 80;
var CLASS_HEIGHT = 40;
var CLASS_LABEL_X_OFFSET = -25;
var CLASS_LABEL_Y_OFFSET = 25;
var MESSAGE_SPACE = 50;
var MESSAGE_LABEL_X_OFFSET = -40;
var MESSAGE_LABEL_Y_OFFSET = 70;
var MESSAGE_ARROW_Y_OFFSET = 80;
var CANVAS_WIDTH = 800;
var CANVAS_HEIGHT = 600;
// Create an svg canvas
var svg = d3.select("#drawArea")
.append("svg")
.attr("width", CANVAS_WIDTH)
.attr("height", CANVAS_HEIGHT);
// Draw vertical lines
classes.forEach(function(c, i) {
var line = svg.append("line")
.style("stroke", "#888")
.attr("x1", XPAD + i * VERT_SPACE)
.attr("y1", YPAD)
.attr("x2", XPAD + i * VERT_SPACE)
.attr("y2", YPAD + VERT_PAD + messages.length * MESSAGE_SPACE);
});
// Draw classes
classes.forEach(function(c, i) {
var x = XPAD + i * VERT_SPACE;
var g1 = svg.append("g")
.attr("transform", "translate(" + x + "," + YPAD + ")")
.attr("class", "first")
.append("rect")
.attr({x: -CLASS_WIDTH/2, y:0, width: CLASS_WIDTH, height: CLASS_HEIGHT})
.style("fill", "#CCC");
});
// Draw class labels
classes.forEach(function(c, i) {
var x = XPAD + i * VERT_SPACE;
var g1 = svg.append("g")
.attr("transform", "translate(" + x + "," + YPAD + ")")
.attr("class", "first")
.append("text")
.text(function (d) { return c; })
.attr("dx", CLASS_LABEL_X_OFFSET)
.attr("dy", CLASS_LABEL_Y_OFFSET);
});
// Draw message arrows
messages.forEach(function(m, i) {
var y = YPAD + MESSAGE_ARROW_Y_OFFSET + i * MESSAGE_SPACE;
var line = svg.append("line")
.style("stroke", "black")
.attr("x1", XPAD + m.start * VERT_SPACE)
.attr("y1", y)
.attr("x2", XPAD + m.end * VERT_SPACE)
.attr("y2", y)
.attr("marker-end", "url(#end)")
.append("text")
.text(function (d) { return m.message; });
});
// Draw message labels
messages.forEach(function(m, i) {
var xPos = XPAD + MESSAGE_LABEL_X_OFFSET + (((m.end - m.start) * VERT_SPACE) / 2) + (m.start * VERT_SPACE);
var yPos = YPAD + MESSAGE_LABEL_Y_OFFSET + i * MESSAGE_SPACE;
var g1 = svg.append("g")
.attr("transform", "translate(" + xPos + "," + yPos + ")")
.attr("class", "first")
.append("text")
.text(function (d) { return m.message; });
});
// Arrow style
svg.append("svg:defs").selectAll("marker")
.data(["end"])
.enter().append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 10)
.attr("refY", 0)
.attr("markerWidth", 10)
.attr("markerHeight", 10)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M0,-5L10,0L0,5");
})();
</script>
</body>
</html>
@RudradevPathak
Copy link

RudradevPathak commented Oct 3, 2016

how we can make this whole diagram as Zoomable and draggable? I am able to make draggable classes, message line only not whole.

@RudradevPathak
Copy link

I am able to zoom and drag, thanks..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment