Quick Start - Lyukx/SDExplorer GitHub Wiki

This is a tutorial to show the basic usage of SDExplorer.

  • To learn the basic features of SDExplorer, refer to playground.

  • To build a large-scale Sequence Diagram, you can use our template

1. Setup work environment.

Download sd.js or sd.min.js from release page. And create a project like follows:

./
├── index.html
└── public/
    └── javascript/
        └── sd.js

*Note that this direction architecture is only an example, SDExplorer can be used same as any other javascript libraries!

2. Edit index.html

Copy & paste the following code into index.html

<!DOCTYPE html>
<meta charset="utf-8">
<body>
    <div id="sdexplorer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="./public/javascript/sd.js"></script>
<script>

// 'type' attribute is optional. It can stand for class/package name in Java scenario
var objects = [
  {id: 0, name: "a", type: "A"},
  {id: 1, name: "b", type: "B"},
  {id: 2, name: "c"},
  {id: 3, name: "d"}
];

var groups = [{id: 4, objs: [2,3], name:"CD"}];

// Messages with 'return: true' attribute is return message
var messages = [
  {id: 0, from: 0, to: 1, message: "foo()"},
  {id: 1, from: 1, to: 2, message: "bar()"},
  {id: 2, from: 2, to: 0, message: "hoge()"},
  {id: 2, from: 2, return: true},
  {id: 3, from: 2, to: 3, message: "hogehoge()"},
  {id: 3, from: 2, return: true},
  {id: 4, from: 2, to: 0, message: "hoge()"},
  {id: 4, from: 2, return: true},
  {id: 5, from: 2, to: 3, message: "hogehoge()"},
  {id: 5, from: 2, return: true},
  {id: 6, from: 2, to: 0, message: "hoge()"},
  {id: 6, from: 2, return: true},
  {id: 7, from: 2, to: 3, message: "hogehoge()"},
  {id: 7, from: 2, return: true},
  {id: 1, from: 1, return: true},
  {id: 0, from: 0, return: true}
];

var loops = [
  {
    represent: [2, 3],
    field: [2, 3, 4, 5, 6, 7],
    repeat: 3
  }
];

var graph = new sd.SDViewer({
  objects: objects,
  messages: messages,
  groups: groups,
  loops: loops,
  drawAreaId: "sdexplorer"
});
</script>
</body>

3. You got it!

Open index.html in your browser and see the result!

4. Explore the sequence diagram

  • Move, Zoom
    • Use mouse to drag & zoom. Direction keys on keyboard are also available.
  • Hintbox
    • Double click messages and open the hint box
  • Fold/Unfold a group
    • Yellow boxes are groups and contain several objects. Click on the group and fold/unfold it.

5. Compress the sequence diagram using loop summarize

SDExplorer has a build-in loop detector, you can use it to summarize the loops. In the example, you can call API using browser's console:

// Compress
graph.compress()
// Decompress
graph.decompress()

To learn more details, refer to the documents.

⚠️ **GitHub.com Fallback** ⚠️