CSDN MarkDown Sixth article--UML sequence diagram implementation

This article begins with a discussion of code-level issues. The main feature of Markdown is the design implementation.

This article begins with the markdown perimeter code:
UML sequence diagrams are obtained from https://github.com/bramp/js-sequence-diagrams copy.

When this UML code also uses two JS, function library and drawing.

<script src="underscore-min.js"></script><script src="raphael-min.js"></script>

First of all, talk about this JS core class:
Https://github.com/bramp/js-sequence-diagrams/blob/master/src/sequence-diagram.js

First of all, this class is divided into two styles in fact. One is the style now adopted by CSDN, called Simple. The other is a hand-drawn style called hand. Defined as follows:

var themes = {simple : RaphaelTheme,hand : HandRaphaelTheme};

function (container, options) {var‘hand‘};options = _.defaults(options || {}, default_options);ifin themes))thrownewError("Unsupported theme: " + options.theme);varnew themes[options.theme](this// end of drawSVG

Drawsvg is the outermost JS method to draw calls. For example:

<div  id  = "diagram" ;  diagram would Be placed Here</div ;   <script  src  = " Sequence-diagram-min.js ";    </script ;  <script    var  diagram = diagram.parse (" a->b:does Something "); Diagram.drawsvg ( ' diagram ' );  </script ;   

You can draw a graphic below. So drawsvg is the core entrance.

The most important sentence in the implementation of Drawsvg:

drawing.draw(container);

The draw function for this invocation is defined as follows:

Draw: function(container) {        varDiagram = This. Diagram; This. Init_paper (container); This. Init_font (); This. layout ();varTitle_height = This. _title? This. _title.height:0; This. _paper.setstart (); This. _paper.setsize (Diagram.width, diagram.height);vary = diagram_margin + title_height; This. Draw_title (); This. draw_actors (y); This. draw_signals (y + This. _actors_height); This. _paper.setfinish ();},

These sentences look bland, that is, initialize the background, initialize the font, initialize the various, then draw the title, draw the character (that is, the entity in the sequence diagram), draw the call arrow.

It seems simple, but the most tedious is:

this.layout();

Layout: To traverse all the things you want to draw on the canvas, anticipate the length of each thing, and then calculate the size of the canvas based on the distance between the length and width of each thing. This JS does not do a fixed length and width after the various things such as scaling.

Once this is done, start drawing characters (i.e. entities)

Created with Rapha?l 2.1.2 A A This is role a . includes top and bottom two squares and middle vertical lines

Then, there is a gap between the two characters. For example:

Created with Rapha?l 2.1.2 What is the distance? A A B B the spacing between our two characters includes top and bottom two squares and middle vertical lines

The calculation of the spacing is not very easy, first determine the basic height and width of each role, and then according to the signal signal (signal includes two kinds, one is the arrow relationship, the other is the comment box) so you can see the comment box and the arrows also have a top to bottom order. The width of the signal and the number of words and the width of the relationship (the calculation is more complex here, omitted too many words ...) Interested to see the source code).

Then the sequential traversal, in turn, determine a,b,c ... The absolute coordinates where each role resides.

Each signal has a height, and all the signal heights are added and the coordinates of the lower character box are obtained. Then the connection is done.

See the source code found a lot of features not ...

For example, add the title in UML
And the comment box in UML In addition to right, left, and over, for over can also be placed on more than one role.

Title and Over

```sequencetitle: 距离是什么？A->B: 我们两个角色之间的间距Note Over A,B: 包括上下两个方块和中间的竖线Note Over A: I‘m A```

Performance:

Created with Rapha?l 2.1.2 What is the distance? A A B B the spacing between our two characters includes top and bottom two squares and middle vertical lines I ' m A

Https://github.com/bramp/js-sequence-diagrams/blob/master/src/jquery-plugin.js

In this class, if the option attribute is not defined, it can only be used in simple form. It feels like Csdn's dev doesn't define this option. There's nothing I can do here.

[Https://github.com/bramp/js-sequence-diagrams/blob/master/src/diagram.js] There is nothing good about this class, it is the entity class constructed by parser.

The remaining two Gammar JS. This lexical parsing is put in a later article. The network is not good, everything is timeout, also should sleep.

CSDN MarkDown Sixth article--UML sequence diagram implementation