You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
You will need [Raphaël](http://raphaeljs.com/), [underscore.js](http://underscorejs.org/) (or [lodash](https://lodash.com/)), and optionally [jQuery](https://jquery.com/).
23
+
You will need [Snap.svg](http://snapsvg.io/), [Web Font Loader](https://github.com/typekit/webfontloader) (if you wish to use custom fonts), [underscore.js](http://underscorejs.org/) (or [lodash](https://lodash.com/)), and optionally [jQuery](https://jquery.com/).
24
24
25
25
26
26
Installation
27
27
----------------------
28
28
29
29
### bower
30
30
31
-
Just run`bower install bramp/js-sequence-diagrams` and include the scripts below:
31
+
Run`bower install bramp/js-sequence-diagrams` and include the scripts below:
Not using bower? No problem. Just download the dependencies, and include them yourself.
46
+
49
47
Usage
50
48
-----
51
49
@@ -54,19 +52,83 @@ You can use the Diagram class like:
54
52
```html
55
53
<div id="diagram">Diagram will be placed here</div>
56
54
<script>
57
-
var diagram =Diagram.parse("A->B: Does something");
58
-
diagram.drawSVG('diagram');
55
+
var d =Diagram.parse("A->B: Does something");
56
+
var options = {theme:'simple'};
57
+
d.drawSVG('diagram', options);
59
58
</script>
60
59
```
61
60
62
61
or use jQuery to do all the work:
63
62
```html
64
63
<divclass="diagram">A->B: Message</div>
65
64
<script>
66
-
$(".diagram").sequenceDiagram({theme:'hand'});
65
+
var options = {theme:'hand'};
66
+
$(".diagram").sequenceDiagram(options);
67
67
</script>
68
68
```
69
69
70
+
For full examples check out [the demo site](https://bramp.github.io/js-sequence-diagrams/).
71
+
72
+
Options
73
+
-------
74
+
75
+
```javascript
76
+
var options = {
77
+
// Change the styling of the diagram, typically one of 'simple', 'hand'. New themes can be registered with registerTheme(...).
78
+
theme: string,
79
+
80
+
// CSS style to apply to the diagram's svg tag. (Only supported if using snap.svg)
81
+
css_class: string,
82
+
};
83
+
```
84
+
85
+
Styling
86
+
-------
87
+
88
+
The following CSS classes are applied to the SVG diagram when using snap.svg:
89
+
90
+
*`sequence`: Applies to main SVG tag.
91
+
*`title`: Applied to the title of the diagram.
92
+
*`actor`: Applied to the actors.
93
+
*`signal`: Applied to the signals.
94
+
*`note`: Applied to all notes.
95
+
96
+
The diagram can then be customised, for example:
97
+
98
+
```css
99
+
.signaltext {
100
+
fill: #000000;
101
+
}
102
+
.signaltext:hover {
103
+
fill: #aaaaaa
104
+
}
105
+
.noterect, .notepath {
106
+
fill: #ffff00;
107
+
}
108
+
.titlerect, .titlepath,
109
+
.actorrect, .actorpath {
110
+
fill: #ffffff
111
+
}
112
+
```
113
+
114
+
Raphaël Deprecation
115
+
-------------------
116
+
117
+
Version 1.x of this library used [Raphaël](http://raphaeljs.com/) for drawing the diagrams, however, Raphaël had some limitations, and since disappeared from the Internet. We've decided to move to [Snap.svg](http://snapsvg.io/), which is a pure SVG implementation, instead of Raphaël which in addition to SVG, also supported VML (on Internet Explorer). This support of VML made it impossible to use some newer SVG capabilities. Native SVG allows us to use CSS styling, better font support, animations and more.
118
+
119
+
To aid in the transition Version 2.x will support both Raphaël and Snap.svg (preferring Snap.svg). If you include Raphaël instead of snap.svg, it will default to using Raphaël as the rendering library. For example
The plan is to drop support for Raphaël in a future release, simplifying the library, and reducing the file size.
126
+
127
+
### Adding a Font
128
+
129
+
Raphael requires Cufon style fonts. Find the font you want in ttf or otf format, visit [Cufon's site](http://cufon.shoqolate.com/generate/) and process it into a javascript file. Then ensure the font is included via the HTML, or recompile after altering main.js. So far only the hand drawn font, Daniel Bold, has been included.
130
+
131
+
70
132
Build requirements
71
133
------------------
72
134
The build is managed by a Makefile, and uses various tools available from npm. Thus both `make` and [npm](https://github.com/npm/npm) are required, and can easily be installed on any Linux or Mac machine.
@@ -107,17 +169,13 @@ How to release
107
169
*``git tag -a v1.x.x -m v1.x.x``
108
170
*``git push origin v1.x.x``
109
171
110
-
Adding a Font
111
-
-------------
112
-
113
-
Raphael requires Cufon style fonts. Find the font you want in ttf or otf format, visit [Cufon's site](http://cufon.shoqolate.com/generate/) and process it into a javascript file. Then ensure the font is included via the HTML, or recompile after altering main.js. So far only the hand drawn font, Daniel Bold, has been included.
114
-
115
172
116
173
TODO
117
174
----
118
175
* Other themes
119
-
* Rethink the use of Raphael. Due to its support of VML (which I don't care about), it makes many things harder. For example, font support, css styling, etc. Perhaps draw the SVG by hand, or find a small helper library
120
176
* Automate the release process
177
+
* Testing that checks the generated SVG is correct
178
+
* Improve the hand drawn theme
121
179
* Dozens of other issues on https://github.com/bramp/js-sequence-diagrams/issues
122
180
123
181
Contributors
@@ -127,15 +185,16 @@ via [GitHub](https://github.com/bramp/js-sequence-diagrams/graphs/contributors)
127
185
128
186
Thanks
129
187
------
130
-
This project makes use of [Jison](http://zaach.github.io/jison/), Raphaël, underscore.js, and the awersome [Daniel font](http://www.dafont.com/daniel.font) (which is free to use for any purpose).
188
+
This project makes use of [Jison](https://zaach.github.io/jison/), snap.svg, underscore.js, and the awersome [Daniel font](http://www.dafont.com/daniel.font) (which is free to use for any purpose).
131
189
132
190
Many thanks to [Web Sequence Diagrams](http://www.websequencediagrams.com/) which greatly inspired this project, and forms the basis for the syntax.
133
191
134
192
Related
135
193
-------
136
194
137
195
*[Web Sequence Diagrams](http://www.websequencediagrams.com/) Server side version with a commercial offering
138
-
*[flowchart.js](http://adrai.github.io/flowchart.js/) A similar project that draws flow charts in the browser
196
+
*[flowchart.js](https://adrai.github.io/flowchart.js/) A similar project that draws flow charts in the browser
Copy file name to clipboardexpand all lines: fonts/daniel/README.md
+2-1
Original file line number
Diff line number
Diff line change
@@ -16,7 +16,8 @@ I (bramp) fixed the backslash issues by just flipping the character, and removed
16
16
Check out the test/font_test.html, to see all valid glyths.
17
17
18
18
## Raphael
19
-
For Raphael the TTF fonts were then converted to cufon format, using [this site](http://cufon.shoqolate.com/generate/).0
19
+
For Raphael the TTF fonts were then converted to cufon format, using [this site](http://cufon.shoqolate.com/generate/).
20
+
20
21
## Snap.svg
21
22
Snap uses normal CSS styled fonts. In this case, I used [font squirell](http://www.fontsquirrel.com/tools/webfont-generator) to convert to daniel OTF fonts to WOFF/WOFF2 formats, which is supported across modern browsers.
0 commit comments