Implement UML sequence diagram and uml Sequence

Implement UML sequence diagram and uml Sequence

This article begins to discuss issues at the code level. It mainly refers to the design and implementation of the markdown function.

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

For example, this UML Code also uses two JS, function library and drawing.

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

First, let's talk about the core JS class:
Https://github.com/bramp/js-sequence-diagrams/blob/master/src/sequence-diagram.js

First, this class is divided into two types. One is the style currently adopted by CSDN, which is called simple, and the other is hand-drawn, which is called hand. Definition:

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

Diagram.prototype.drawSVG = function (container, options) {var default_options = {theme: 'hand'};options = _.defaults(options || {}, default_options);if (!(options.theme in themes))throw new Error("Unsupported theme: " + options.theme);var drawing = new themes[options.theme](this);drawing.draw(container);}; // end of drawSVG

DrawSVG is the method for calling drawing in the outermost JS. For example:

<div id="diagram">Diagram will be placed here</div><script src="sequence-diagram-min.js"></script><script>   var diagram = Diagram.parse("A->B: Does something");  diagram.drawSVG('diagram');</script>

The following figure shows the image. Therefore, drawSVG is the core entry.

The most important sentence in the implementation of drawSVG is:

drawing.draw(container);

The called draw function is defined as follows:

    draw : function(container) {        var diagram = this.diagram;        this.init_paper(container);        this.init_font();        this.layout();        var title_height = this._title ? this._title.height : 0;        this._paper.setStart();        this._paper.setSize(diagram.width, diagram.height);        var y = DIAGRAM_MARGIN + title_height;        this.draw_title();        this.draw_actors(y);        this.draw_signals(y + this._actors_height);        this._paper.setFinish();},

These statements seem unremarkable, that is, initializing the background, initializing the font, initializing various types, then drawing the title, drawing the role (that is, the entity in the sequence diagram), and drawing the call arrow.

This seems simple, but the most tedious one is:

this.layout();

Layout: to traverse all the things to be painted on the canvas, you must predict in advance, the length and width of each things, and then calculate the size of the canvas based on the distance between the two things. This section of JS does not achieve proportional scaling of various things after fixed length and width.

After this is done, start to draw the role (that is, the entity)

Created with Rapha rjl 2.1.2 A A This is Role. Including the upper and lower squares and the middle vertical bars

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

Created with Rapha rjl 2.1.2 What is distance? A A B B Distance between two roles Including the upper and lower squares and the middle vertical bars

The Calculation of spacing is not very easy. First, determine the basic height and width of each role, and then calculate the signal (signal includes two types, one is the arrow relationship, the other is the comment box) so you can see that the comment box and arrow are in the order from top to bottom. The width of signal has a relationship with the number and width of words (here the calculation is more complex, here too many words are omitted... If you are interested, refer to the source code ).

Then, traverse them sequentially to determine A, B, C... The absolute coordinates of each role.

Every signal has a height. After adding all signal heights, we can get the coordinates of the lower-end role box. Then the connection is complete.

Looking at the source code, I found many functions that are not available...

For example, add title in UML
In addition to Right, Left, and Over, the comment box in UML can also be placed on multiple roles.

Title and Over

'''Sequencetitle: What is the distance? A-> B: the spacing between the two roles. Note Over A. B: it includes the upper and lower squares and the middle vertical bars. Note Over A: I'm '''

Performance:

Created with Rapha rjl 2.1.2 What is distance? A A B B Distance between two roles Including the upper and lower squares and the middle vertical bars I'm

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 in the form of simple. It seems that the CSDN dev does not define this option. I cannot do anything here.

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

The remaining two gammar JS. Lexical parsing will be followed by another article. The network is really bad, and everything is timeout. In addition, we should go to bed.