Add bundled library script, + minification and demo page [#25]
This commit is contained in:
David Evans
parent
1bf6ad6b5b
commit
c493530ecb
|
|
@ -0,0 +1,3 @@
|
|||
/node_modules
|
||||
.DS_Store
|
||||
|
||||
16
README.md
16
README.md
|
|
@ -2,11 +2,11 @@
|
|||
|
||||
A tool for creating sequence diagrams from a Domain-Specific Language.
|
||||
|
||||
[See it in action!](https://davidje13.github.io/SequenceDiagram/)
|
||||
[See it in action!](https://davidje13.github.io/SequenceDiagram/editor.htm)
|
||||
|
||||
This project includes a web page for editing the diagrams, but the core
|
||||
logic is available as separate components which can be included in
|
||||
other projects.
|
||||
logic is available as a component which can be
|
||||
[included in other projects](https://davidje13.github.io/SequenceDiagram/).
|
||||
|
||||
## Examples
|
||||
|
||||
|
|
@ -298,11 +298,13 @@ run a local HTTP server to ensure linting is successful. One option if
|
|||
you have NPM installed is:
|
||||
|
||||
```shell
|
||||
# Setup
|
||||
npm install http-server -g;
|
||||
npm run serve;
|
||||
```
|
||||
|
||||
# Then
|
||||
http-server;
|
||||
It is also good to rebuild the minified library when committing:
|
||||
|
||||
```shell
|
||||
npm run minify;
|
||||
```
|
||||
|
||||
The current status of the tests on the master branch can be checked at
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="content-security-policy" content="
|
||||
base-uri 'self';
|
||||
default-src 'none';
|
||||
script-src 'self' https://cdnjs.cloudflare.com;
|
||||
style-src 'self' https://cdnjs.cloudflare.com;
|
||||
img-src 'self' blob:;
|
||||
form-action 'none';
|
||||
">
|
||||
|
||||
<title>Sequence Diagram</title>
|
||||
<link rel="icon" href="favicon.png">
|
||||
|
||||
<link rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.31.0/codemirror.min.css"
|
||||
integrity="sha256-Zg9EoB1hB8n8EVhx/D07lT5dD3ZZqjJbxlDmHx8jsMc="
|
||||
crossorigin="anonymous"
|
||||
>
|
||||
|
||||
<link rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.31.0/addon/hint/show-hint.min.css"
|
||||
integrity="sha256-Ng5EdzHS/CC37tR7tE75e4Th9+fBvOB4eYITOkXS22Q="
|
||||
crossorigin="anonymous"
|
||||
>
|
||||
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
|
||||
<script src="scripts/requireConfig.js"></script>
|
||||
|
||||
<script
|
||||
data-main="scripts/main"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"
|
||||
integrity="sha256-0SGl1PJNDyJwcV5T+weg2zpEMrh7xvlwO4oXgvZCeZk="
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<meta
|
||||
name="cdn-cm/lib/codemirror"
|
||||
content="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.31.0/codemirror.min.js"
|
||||
data-integrity="sha256-eue5ceZRwKVQ1OXOZSyU7MXCTZMlqsPi/TOIqh1Vlzo="
|
||||
>
|
||||
|
||||
<meta
|
||||
name="cdn-cm/addon/hint/show-hint"
|
||||
content="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.31.0/addon/hint/show-hint.min.js"
|
||||
data-integrity="sha256-OvxDPyq6KQAoWh11DLJdBVlHHLkYYiy4EzqTjIEJbb4="
|
||||
>
|
||||
|
||||
<meta
|
||||
name="cdn-cm/addon/edit/trailingspace"
|
||||
content="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.31.0/addon/edit/trailingspace.min.js"
|
||||
data-integrity="sha256-vnm8bzrI+krtz5228JDC2DoTv0e+sfnfTCiUnO2EBAM="
|
||||
>
|
||||
|
||||
<meta
|
||||
name="cdn-cm/addon/comment/comment"
|
||||
content="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.31.0/addon/comment/comment.min.js"
|
||||
data-integrity="sha256-HYX1RusN7a369vYuOd1mGvxLcNL4z/MihkahAI2CH8k="
|
||||
>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<noscript>This tool requires Javascript!</noscript>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
529
index.html
529
index.html
|
|
@ -4,66 +4,503 @@
|
|||
<meta http-equiv="content-security-policy" content="
|
||||
base-uri 'self';
|
||||
default-src 'none';
|
||||
script-src 'self' https://cdnjs.cloudflare.com;
|
||||
style-src 'self' https://cdnjs.cloudflare.com;
|
||||
img-src 'self' blob:;
|
||||
script-src 'self' 'unsafe-inline';
|
||||
style-src 'self' https://fonts.googleapis.com;
|
||||
font-src 'self' https://fonts.gstatic.com;
|
||||
img-src 'self';
|
||||
form-action 'none';
|
||||
">
|
||||
|
||||
<title>Sequence Diagram</title>
|
||||
<title>Sequence Diagram Plugin</title>
|
||||
<link rel="icon" href="favicon.png">
|
||||
|
||||
<link rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.31.0/codemirror.min.css"
|
||||
integrity="sha256-Zg9EoB1hB8n8EVhx/D07lT5dD3ZZqjJbxlDmHx8jsMc="
|
||||
crossorigin="anonymous"
|
||||
>
|
||||
<link href="https://fonts.googleapis.com/css?family=Vollkorn" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles/home.css">
|
||||
|
||||
<link rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.31.0/addon/hint/show-hint.min.css"
|
||||
integrity="sha256-Ng5EdzHS/CC37tR7tE75e4Th9+fBvOB4eYITOkXS22Q="
|
||||
crossorigin="anonymous"
|
||||
>
|
||||
<script src="lib/sequence-diagram.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
<script>window.addEventListener('load', () => {
|
||||
|
||||
<script src="scripts/requireConfig.js"></script>
|
||||
// Example 1:
|
||||
(() => {
|
||||
const diagram = new SequenceDiagram();
|
||||
diagram.set('A -> B\nB -> A');
|
||||
diagram.dom().setAttribute('class', 'sequence-diagram');
|
||||
document.getElementById('hold1').appendChild(diagram.dom());
|
||||
diagram.setHighlight(1);
|
||||
})();
|
||||
|
||||
<script
|
||||
data-main="scripts/main"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"
|
||||
integrity="sha256-0SGl1PJNDyJwcV5T+weg2zpEMrh7xvlwO4oXgvZCeZk="
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
// Snippets:
|
||||
const elements = document.getElementsByClassName('example');
|
||||
for(let i = 0; i < elements.length; ++ i) {
|
||||
const el = elements[i];
|
||||
const diagram = new SequenceDiagram(el.innerText);
|
||||
diagram.dom().setAttribute('class', 'example-diagram');
|
||||
el.parentNode.insertBefore(diagram.dom(), el);
|
||||
}
|
||||
|
||||
<meta
|
||||
name="cdn-cm/lib/codemirror"
|
||||
content="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.31.0/codemirror.min.js"
|
||||
data-integrity="sha256-eue5ceZRwKVQ1OXOZSyU7MXCTZMlqsPi/TOIqh1Vlzo="
|
||||
>
|
||||
|
||||
<meta
|
||||
name="cdn-cm/addon/hint/show-hint"
|
||||
content="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.31.0/addon/hint/show-hint.min.js"
|
||||
data-integrity="sha256-OvxDPyq6KQAoWh11DLJdBVlHHLkYYiy4EzqTjIEJbb4="
|
||||
>
|
||||
|
||||
<meta
|
||||
name="cdn-cm/addon/edit/trailingspace"
|
||||
content="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.31.0/addon/edit/trailingspace.min.js"
|
||||
data-integrity="sha256-vnm8bzrI+krtz5228JDC2DoTv0e+sfnfTCiUnO2EBAM="
|
||||
>
|
||||
|
||||
<meta
|
||||
name="cdn-cm/addon/comment/comment"
|
||||
content="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.31.0/addon/comment/comment.min.js"
|
||||
data-integrity="sha256-HYX1RusN7a369vYuOd1mGvxLcNL4z/MihkahAI2CH8k="
|
||||
>
|
||||
}, {once: true});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<noscript>This tool requires Javascript!</noscript>
|
||||
<article>
|
||||
|
||||
<header>
|
||||
<h1>Sequence Diagram</h1>
|
||||
|
||||
<pre class="sequence-diagram">
|
||||
define Complex System as sys
|
||||
define User as usr
|
||||
define Sequence Diagram as diagram
|
||||
define Other Users as usr2
|
||||
begin sys, usr, usr2
|
||||
sys ~> usr
|
||||
note over usr: "Take time to\nunderstand System"
|
||||
usr -> *diagram: Create
|
||||
usr -> usr2: Inform
|
||||
usr2 <-> diagram: Learn & understand
|
||||
usr2 -> sys: Use
|
||||
terminators box
|
||||
</pre>
|
||||
</header>
|
||||
|
||||
<h2 id="Introduction">Introduction</h2>
|
||||
|
||||
<p>
|
||||
Want to draw a Sequence Diagram?
|
||||
<a href="editor.htm" target="_blank">Go to the online editor</a>.
|
||||
</p>
|
||||
<p>
|
||||
This library renders sequence diagrams from code. It is
|
||||
<a href="https://github.com/davidje13/SequenceDiagram" target="_blank">open-source</a>
|
||||
(LGPL-3.0), and including it in a website is as simple as adding the script:</p>
|
||||
|
||||
<pre>
|
||||
<span class="tag"><script</span> <span class="attr">src=</span><span class="literal">"lib/sequence-diagram.min.js"</span><span class="tag">></script></span>
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
Any element with the class <code>sequence-diagram</code> will automatically be
|
||||
converted when the page loads:
|
||||
</p>
|
||||
|
||||
<div class="right">
|
||||
<pre class="sequence-diagram">
|
||||
A -> B: foo
|
||||
B -> A: bar
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<pre>
|
||||
<span class="tag"><pre</span> <span class="attr">class=</span><span class="literal">"sequence-diagram"</span><span class="tag">></span>
|
||||
A -> B: foo
|
||||
B -> A: bar
|
||||
<span class="tag"></pre></span>
|
||||
</pre>
|
||||
|
||||
<h2 id="Language">Language</h2>
|
||||
|
||||
<h3 id="ConnectionTypes">Connection Types</h3>
|
||||
<pre class="example">
|
||||
title Connection Types
|
||||
|
||||
begin Foo, Bar, Baz
|
||||
|
||||
Foo -> Bar: Simple arrow
|
||||
Bar --> Baz: Dashed arrow
|
||||
Foo <- Bar: Reversed arrow
|
||||
Bar <-- Baz: Reversed & dashed
|
||||
Foo <-> Bar: Double arrow
|
||||
Bar <--> Baz: Double dashed arrow
|
||||
|
||||
# An arrow with no label:
|
||||
Foo -> Bar
|
||||
|
||||
Bar ->> Baz: Different arrow
|
||||
Foo <<--> Bar: Mix of arrows
|
||||
|
||||
Bar -> Bar: Bar talks to itself
|
||||
|
||||
Foo -> +Bar: Foo asks Bar
|
||||
-Bar --> Foo: and Bar replies
|
||||
|
||||
# Arrows leaving on the left and right of the diagram
|
||||
[ -> Foo: From the left
|
||||
[ <- Foo: To the left
|
||||
Foo -> ]: To the right
|
||||
Foo <- ]: From the right
|
||||
[ ~> ]: Wavy left to right!
|
||||
# (etc.)
|
||||
</pre>
|
||||
|
||||
<h3 id="NotesState">Notes & State</h3>
|
||||
<pre class="example">
|
||||
title Note Placements
|
||||
|
||||
note over Foo: Foo says something
|
||||
note left of Foo: Stuff
|
||||
note right of Bar: More stuff
|
||||
note over Foo, Bar: "Foo and Bar
|
||||
on multiple lines"
|
||||
note between Foo, Bar: Link
|
||||
|
||||
text right: 'Comments\nOver here!'
|
||||
|
||||
state over Foo: Foo is ponderous
|
||||
</pre>
|
||||
|
||||
<h3 id="Logic">Logic</h3>
|
||||
<pre class="example">
|
||||
title At the Bank
|
||||
|
||||
begin Person, ATM, Bank
|
||||
Person -> ATM: Request money
|
||||
ATM -> Bank: Check funds
|
||||
if fraud detected
|
||||
Bank -> Police: "Get 'em!"
|
||||
Police -> Person: "You're nicked"
|
||||
end Police
|
||||
else if sufficient funds
|
||||
ATM -> Bank: Withdraw funds
|
||||
repeat until "all requested money
|
||||
has been handed over"
|
||||
ATM -> Person: Dispense note
|
||||
end
|
||||
else
|
||||
ATM -> Person: Error
|
||||
end
|
||||
</pre>
|
||||
|
||||
<h3 id="LabelTemplates">Label Templates</h3>
|
||||
<pre class="example">
|
||||
autolabel "[<inc>] <label>"
|
||||
|
||||
begin "Underpants\nGnomes" as A
|
||||
A <- ]: Collect underpants
|
||||
A <-> ]: ???
|
||||
A <- ]: Profit!
|
||||
</pre>
|
||||
|
||||
<h3 id="MultilineText">Multiline Text</h3>
|
||||
<pre class="example">
|
||||
title 'My Multiline
|
||||
Title'
|
||||
|
||||
note over Foo: 'Also possible\nwith escapes'
|
||||
|
||||
Foo -> Bar: 'Lines of text\non this arrow'
|
||||
|
||||
if 'Even multiline\ninside conditions like this'
|
||||
Foo -> 'Multiline\nagent'
|
||||
end
|
||||
|
||||
state over Foo: 'Newlines here,
|
||||
too!'
|
||||
</pre>
|
||||
|
||||
<h3 id="ShortLivedAgents">Short-Lived Agents</h3>
|
||||
<pre class="example">
|
||||
title "Baz doesn't live long"
|
||||
|
||||
note over Foo, Bar: Using begin / end
|
||||
|
||||
begin Baz
|
||||
Bar -> Baz
|
||||
Baz -> Foo
|
||||
end Baz
|
||||
|
||||
note over Foo, Bar: Using * / !
|
||||
|
||||
# * and ! cause agents to be created and destroyed inline
|
||||
Bar -> *Baz: make Baz
|
||||
Foo <- !Baz: end Baz
|
||||
|
||||
# Foo and Bar end with black bars
|
||||
terminators bar
|
||||
# (options are: box, bar, cross, fade, none)
|
||||
</pre>
|
||||
|
||||
<h3 id="AgentAliases">Agent Aliases</h3>
|
||||
<pre class="example">
|
||||
define My complicated agent name as A
|
||||
define "Another agent name,
|
||||
and this one's multi-line!" as B
|
||||
|
||||
A -> B: this is much easier
|
||||
A <- B: than writing the whole name
|
||||
</pre>
|
||||
|
||||
<h3 id="AlternativeAgentOrdering">Alternative Agent Ordering</h3>
|
||||
<pre class="example">
|
||||
define Baz, Foo
|
||||
|
||||
Foo -> Bar
|
||||
Bar -> Baz
|
||||
</pre>
|
||||
|
||||
<h3 id="LanguageMore">More</h3>
|
||||
|
||||
<p>
|
||||
More features are supported. See the
|
||||
<a href="editor.htm" target="_blank">online editor</a>'s library and
|
||||
autocomplete features to discover them.
|
||||
</p>
|
||||
|
||||
<h2 id="BrowserSupport">Browser Support</h2>
|
||||
|
||||
<p>
|
||||
This has been tested in the latest versions of Google Chrome, Mozilla Firefox,
|
||||
and Apple Safari. Versions of Microsoft Internet Explorer / Edge have not been
|
||||
tested and probably won't work. Any bugs found in a supported browser should be
|
||||
reported in the
|
||||
<a href="https://github.com/davidje13/SequenceDiagram/issues" target="_blank">Issue Tracker</a>.
|
||||
</p>
|
||||
|
||||
<h2 id="API">API</h2>
|
||||
|
||||
<p>
|
||||
For more advanced usage, an API is available:
|
||||
</p>
|
||||
|
||||
<div id="hold1" class="right"></div>
|
||||
|
||||
<pre>
|
||||
var diagram = new SequenceDiagram();
|
||||
diagram.set('A -> B\nB -> A');
|
||||
document.body.appendChild(diagram.dom());
|
||||
diagram.setHighlight(1); // Highlight elements created in line 1 (0-based)
|
||||
</pre>
|
||||
|
||||
<h3 id="API_Constructor">Constructor</h3>
|
||||
|
||||
<pre>
|
||||
diagram = new SequenceDiagram(code, options);
|
||||
diagram = new SequenceDiagram(code);
|
||||
diagram = new SequenceDiagram(options);
|
||||
diagram = new SequenceDiagram();
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
Creates a new SequenceDiagram object. Options is an object which can contain:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>code</code>: Alternative way of specifying code, instead of using a separate argument.</li>
|
||||
<li><code>container</code>: DOM node to append the diagram to (defaults to null).</li>
|
||||
<li><code>themes</code>: List of themes to make available to the diagram (defaults to globally registered themes).</li>
|
||||
<li><code>namespace</code>: Each diagram on a page must have a unique namespace. By default a unique namespace is generated, but if you want something specific, enter it here.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="API_clone">.clone</h3>
|
||||
|
||||
<pre>
|
||||
newDiagram = diagram.clone(options);
|
||||
newDiagram = diagram.clone();
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
Creates a copy of the diagram. If options are given, they will override the
|
||||
current diagram's state (options is passed to the constructor of the new object,
|
||||
so all the same options are available).
|
||||
</p>
|
||||
|
||||
<h3 id="API_set">.set</h3>
|
||||
|
||||
<pre>
|
||||
diagram.set(code);
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
Changes the code for the diagram and causes a re-render.
|
||||
</p>
|
||||
|
||||
<h3 id="API_process">.process</h3>
|
||||
|
||||
<pre>
|
||||
processed = diagram.process(code);
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
Processes the given code but does not render it. Causes no change to the
|
||||
diagram object. This is mostly useful for debounced rendering with immediate
|
||||
error notifications. The resulting object can be passed to
|
||||
<a href="#API_render"><code>render</code></a> at a later point.
|
||||
</p>
|
||||
|
||||
<h3 id="API_render">.render</h3>
|
||||
|
||||
<pre>
|
||||
diagram.render();
|
||||
diagram.render(processed);
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
Forces a re-render of the diagram. Typically this happens automatically.
|
||||
Optionally, the result of an earlier call to
|
||||
<a href="#API_process"><code>process</code></a> can be provided.
|
||||
</p>
|
||||
|
||||
<h3 id="API_setHighlight">.setHighlight</h3>
|
||||
|
||||
<pre>
|
||||
diagram.setHighlight(line);
|
||||
diagram.setHighlight();
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
Marks elements generated by the specified line with a "focus" CSS class, which
|
||||
can be used to style them. Only one line can be highlighted at a time. Calling
|
||||
with no parameter (or <code>null</code>) will remove the highlighting.
|
||||
</p>
|
||||
|
||||
<h3 id="API_addTheme">.addTheme</h3>
|
||||
|
||||
<pre>
|
||||
diagram.addTheme(theme);
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
Make a new theme available to the diagram. Any unrecognised themes are replaced
|
||||
with the default theme.
|
||||
</p>
|
||||
<p>
|
||||
The theme API has not been finalised yet, so this method is not typically
|
||||
useful.
|
||||
</p>
|
||||
|
||||
<h3 id="API_getThemeNames">.getThemeNames</h3>
|
||||
|
||||
<pre>
|
||||
names = diagram.getThemeNames();
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
Returns a list of names of themes which are available to this diagram. These
|
||||
can be specified in a <code>theme <name></code> line in the code.
|
||||
</p>
|
||||
|
||||
<h3 id="API_getThemes">.getThemes</h3>
|
||||
|
||||
<pre>
|
||||
themes = diagram.getThemes();
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
Returns a list of themes which are available to this diagram.
|
||||
</p>
|
||||
|
||||
<h3 id="API_getSVGSynchronous">.getSVGSynchronous</h3>
|
||||
|
||||
<pre>
|
||||
svgURL = diagram.getSVGSynchronous();
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
Returns a blob URL which contains the SVG code for the current diagram.
|
||||
</p>
|
||||
|
||||
<h3 id="API_getSVG">.getSVG</h3>
|
||||
|
||||
<pre>
|
||||
diagram.getSVG().then(({url, latest}) => { ... });
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
Asynchronous version of
|
||||
<a href="#API_getSVGSynchronous"><code>getSVGSynchronous</code></a>. This is
|
||||
provided for compatibility with <a href="#API_getPNG"><code>getPNG</code></a>,
|
||||
which has no synchronous equivalent.
|
||||
</p>
|
||||
<p>The callback recieves an object containing:</p>
|
||||
<ul>
|
||||
<li><code>url</code>: The URL of the generated blob.</li>
|
||||
<li><code>latest</code>: True if the URL given is still valid; subsequent calls to this method will invalidate previous URLs.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="API_getPNG">.getPNG</h3>
|
||||
|
||||
<pre>
|
||||
diagram.getPNG(options).then(({url, latest}) => { ... });
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
Generates a PNG image and returns a blob URL.
|
||||
</p>
|
||||
<p>The options can include:</p>
|
||||
<ul>
|
||||
<li><code>resolution</code>: Desired pixels-per-unit.</li>
|
||||
<li><code>size</code>: Optional width and/or height to render the image at (defaults to the unit size of the diagram). The final output will have size <code>width * resolution</code> × <code>height * resolution</code>.</li>
|
||||
</ul>
|
||||
<p>The callback recieves an object containing:</p>
|
||||
<ul>
|
||||
<li><code>url</code>: The URL of the generated blob.</li>
|
||||
<li><code>latest</code>: True if the URL given is still valid; subsequent calls to this method will invalidate previous URLs.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="API_getSize">.getSize</h3>
|
||||
|
||||
<pre>
|
||||
size = diagram.getSize();
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
Returns an object containing <code>width</code> and <code>height</code>
|
||||
properties, corresponding to the size of the diagram in units.
|
||||
</p>
|
||||
|
||||
<h3 id="API_setContainer">.setContainer</h3>
|
||||
|
||||
<pre>
|
||||
diagram.setContainer(node);
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
Same as calling <code>node.appendChild(diagram.dom())</code>.
|
||||
</p>
|
||||
|
||||
<h3 id="API_dom">.dom</h3>
|
||||
|
||||
<pre>
|
||||
node = diagram.dom();
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
Returns the base SVG element which the diagram has been rendered into.
|
||||
</p>
|
||||
|
||||
<h2 id="Thanks">Thanks</h2>
|
||||
|
||||
<p>
|
||||
Thanks to
|
||||
<a href="https://www.websequencediagrams.com/" target="_blank">websequencediagrams.com</a>
|
||||
and
|
||||
<a href="https://github.com/bramp/js-sequence-diagrams" target="_blank">js-sequence-diagrams</a>
|
||||
for inspiring the syntax of this project.
|
||||
</p>
|
||||
|
||||
<pre class="sequence-diagram fancy">
|
||||
begin User, SequenceDiagram as SD, Parser, Generator, Renderer
|
||||
|
||||
User -> +SD: code
|
||||
|
||||
SD -> +Parser: code
|
||||
-Parser --> SD: parsed
|
||||
|
||||
SD -> +Generator: parsed
|
||||
-Generator --> SD: generated
|
||||
|
||||
-SD -> +Renderer: generated
|
||||
-Renderer -> *DOM: SVG
|
||||
User <~> DOM: interaction
|
||||
|
||||
terminators box
|
||||
</pre>
|
||||
|
||||
<nav>
|
||||
<a href="editor.htm" target="_blank">Online Editor</a><a href="https://github.com/davidje13/SequenceDiagram" target="_blank">GitHub</a>
|
||||
</nav>
|
||||
|
||||
</article>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,222 @@
|
|||
{
|
||||
"name": "sequence-diagram",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"almond": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/almond/-/almond-0.3.3.tgz",
|
||||
"integrity": "sha1-oOfJWsdiTWQXtElLHmi/9pMWiiA=",
|
||||
"dev": true
|
||||
},
|
||||
"async": {
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
|
||||
"integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
|
||||
"dev": true
|
||||
},
|
||||
"colors": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz",
|
||||
"integrity": "sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=",
|
||||
"dev": true
|
||||
},
|
||||
"commander": {
|
||||
"version": "2.11.0",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-2.11.0.tgz",
|
||||
"integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ==",
|
||||
"dev": true
|
||||
},
|
||||
"corser": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
|
||||
"integrity": "sha1-jtolLsqrWEDc2XXOuQ2TcMgZ/4c=",
|
||||
"dev": true
|
||||
},
|
||||
"debug": {
|
||||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
|
||||
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"ecstatic": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ecstatic/-/ecstatic-2.2.1.tgz",
|
||||
"integrity": "sha512-ztE4WqheoWLh3wv+HQwy7dACnvNY620coWpa+XqY6R2cVWgaAT2lUISU1Uf7JpdLLJCURktJOaA9av2AOzsyYQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"he": "1.1.1",
|
||||
"mime": "1.5.0",
|
||||
"minimist": "1.2.0",
|
||||
"url-join": "2.0.2"
|
||||
}
|
||||
},
|
||||
"eventemitter3": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-1.2.0.tgz",
|
||||
"integrity": "sha1-HIaZHYFq0eUEdQ5zh0Ik7PO+xQg=",
|
||||
"dev": true
|
||||
},
|
||||
"he": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
|
||||
"integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
|
||||
"dev": true
|
||||
},
|
||||
"http-proxy": {
|
||||
"version": "1.16.2",
|
||||
"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.16.2.tgz",
|
||||
"integrity": "sha1-Bt/ykpUr9k2+hHH6nfcwZtTzd0I=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"eventemitter3": "1.2.0",
|
||||
"requires-port": "1.0.0"
|
||||
}
|
||||
},
|
||||
"http-server": {
|
||||
"version": "0.10.0",
|
||||
"resolved": "https://registry.npmjs.org/http-server/-/http-server-0.10.0.tgz",
|
||||
"integrity": "sha1-sqRGsWqduH7TxiK6m+sbCFsSNKc=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"colors": "1.0.3",
|
||||
"corser": "2.0.1",
|
||||
"ecstatic": "2.2.1",
|
||||
"http-proxy": "1.16.2",
|
||||
"opener": "1.4.3",
|
||||
"optimist": "0.6.1",
|
||||
"portfinder": "1.0.13",
|
||||
"union": "0.4.6"
|
||||
}
|
||||
},
|
||||
"mime": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/mime/-/mime-1.5.0.tgz",
|
||||
"integrity": "sha512-v/jMDoK/qKptnTuC3YUNbIj8uUYvTCIHzVu9BHldKSWja48wusAtfjlcBlqnFrqClu3yf69ScDxBPrIyFnF51g==",
|
||||
"dev": true
|
||||
},
|
||||
"minimist": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
|
||||
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
|
||||
"dev": true
|
||||
},
|
||||
"mkdirp": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
|
||||
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
|
||||
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
|
||||
"dev": true
|
||||
},
|
||||
"opener": {
|
||||
"version": "1.4.3",
|
||||
"resolved": "https://registry.npmjs.org/opener/-/opener-1.4.3.tgz",
|
||||
"integrity": "sha1-XG2ixdflgx6P+jlklQ+NZnSskLg=",
|
||||
"dev": true
|
||||
},
|
||||
"optimist": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
|
||||
"integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.10",
|
||||
"wordwrap": "0.0.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"minimist": {
|
||||
"version": "0.0.10",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
|
||||
"integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"portfinder": {
|
||||
"version": "1.0.13",
|
||||
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz",
|
||||
"integrity": "sha1-uzLs2HwnEErm7kS1o8y/Drsa7ek=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"async": "1.5.2",
|
||||
"debug": "2.6.9",
|
||||
"mkdirp": "0.5.1"
|
||||
}
|
||||
},
|
||||
"qs": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-2.3.3.tgz",
|
||||
"integrity": "sha1-6eha2+ddoLvkyOBHaghikPhjtAQ=",
|
||||
"dev": true
|
||||
},
|
||||
"requirejs": {
|
||||
"version": "2.3.5",
|
||||
"resolved": "https://registry.npmjs.org/requirejs/-/requirejs-2.3.5.tgz",
|
||||
"integrity": "sha512-svnO+aNcR/an9Dpi44C7KSAy5fFGLtmPbaaCeQaklUz8BQhS64tWWIIlvEA5jrWICzlO/X9KSzSeXFnZdBu8nw==",
|
||||
"dev": true
|
||||
},
|
||||
"requires-port": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
|
||||
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
|
||||
"dev": true
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true
|
||||
},
|
||||
"uglify-es": {
|
||||
"version": "3.1.10",
|
||||
"resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.1.10.tgz",
|
||||
"integrity": "sha512-RwBX0aOeHvO8MKKUeLCArQGb9OZ6xA+EqfVxsE9wqK0saFYFVLIFvHeeCOg61C6NO6KCuSiG9OjNjCA+OB4nzg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"commander": "2.11.0",
|
||||
"source-map": "0.6.1"
|
||||
}
|
||||
},
|
||||
"union": {
|
||||
"version": "0.4.6",
|
||||
"resolved": "https://registry.npmjs.org/union/-/union-0.4.6.tgz",
|
||||
"integrity": "sha1-GY+9rrolTniLDvy2MLwR8kopWeA=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"qs": "2.3.3"
|
||||
}
|
||||
},
|
||||
"url-join": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/url-join/-/url-join-2.0.2.tgz",
|
||||
"integrity": "sha1-wHJ1aWetJLi1nldBVRyqx49QuLc=",
|
||||
"dev": true
|
||||
},
|
||||
"wordwrap": {
|
||||
"version": "0.0.3",
|
||||
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
|
||||
"integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"name": "sequence-diagram",
|
||||
"version": "1.0.0",
|
||||
"description": "Generates SVG Sequence Diagrams from code in the browser",
|
||||
"homepage": "https://github.com/davidje13/SequenceDiagram",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/davidje13/SequenceDiagram.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/davidje13/SequenceDiagram/issues"
|
||||
},
|
||||
"license": "LGPL-3.0",
|
||||
"files": [
|
||||
"lib/sequence-diagram.js"
|
||||
],
|
||||
"main": "lib/sequence-diagram",
|
||||
"scripts": {
|
||||
"serve": "node_modules/http-server/bin/http-server",
|
||||
"minify": "node node_modules/requirejs/bin/r.js -o scripts/build.js && node_modules/uglify-es/bin/uglifyjs --compress --warn --output lib/sequence-diagram.min.js -- lib/sequence-diagram.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"almond": "^0.3.3",
|
||||
"http-server": "^0.10.0",
|
||||
"requirejs": "^2.3.5",
|
||||
"uglify-es": "^3.1.10"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
({
|
||||
baseUrl: '.',
|
||||
name: '../node_modules/almond/almond',
|
||||
include: [
|
||||
'standalone',
|
||||
],
|
||||
out: '../lib/sequence-diagram.js',
|
||||
optimize: 'none',
|
||||
wrap: true,
|
||||
})
|
||||
|
|
@ -181,6 +181,10 @@ define([
|
|||
}
|
||||
|
||||
function convert(element, code = null, options = {}) {
|
||||
if(element.tagName === 'svg') {
|
||||
return null;
|
||||
}
|
||||
|
||||
if(code === null) {
|
||||
code = element.innerText;
|
||||
} else if(typeof code === 'object') {
|
||||
|
|
@ -188,19 +192,37 @@ define([
|
|||
code = options.code;
|
||||
}
|
||||
const diagram = new SequenceDiagram(code, options);
|
||||
element.parentNode.insertBefore(diagram.dom(), element);
|
||||
const newElement = diagram.dom();
|
||||
element.parentNode.insertBefore(newElement, element);
|
||||
element.parentNode.removeChild(element);
|
||||
const attrs = element.attributes;
|
||||
for(let i = 0; i < attrs.length; ++ i) {
|
||||
newElement.setAttribute(
|
||||
attrs[i].nodeName,
|
||||
attrs[i].nodeValue
|
||||
);
|
||||
}
|
||||
return diagram;
|
||||
}
|
||||
|
||||
function convertAll(root = null) {
|
||||
if(!root) {
|
||||
root = document;
|
||||
function convertAll(root = null, className = 'sequence-diagram') {
|
||||
if(typeof root === 'string') {
|
||||
className = root;
|
||||
root = null;
|
||||
}
|
||||
const elements = root.getElementsByClassName('sequence-diagram');
|
||||
let elements = null;
|
||||
if(root && root.length !== undefined) {
|
||||
elements = root;
|
||||
} else {
|
||||
elements = (root || document).getElementsByClassName(className);
|
||||
}
|
||||
// Convert from "live" collection to static to avoid infinite loops:
|
||||
const els = [];
|
||||
for(let i = 0; i < elements.length; ++ i) {
|
||||
convert(elements[i]);
|
||||
els.push(elements[i]);
|
||||
}
|
||||
// Convert elements
|
||||
els.forEach((el) => convert(el));
|
||||
}
|
||||
|
||||
return Object.assign(SequenceDiagram, {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
requirejs(['sequence/SequenceDiagram'], (SequenceDiagram) => {
|
||||
'use strict';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
SequenceDiagram.convertAll();
|
||||
}, {once: true});
|
||||
|
||||
if(window.CodeMirror) {
|
||||
SequenceDiagram.registerCodeMirrorMode(window.CodeMirror);
|
||||
}
|
||||
|
||||
window.SequenceDiagram = SequenceDiagram;
|
||||
}, null, true);
|
||||
|
|
@ -9,6 +9,7 @@ define(['jshintConfig', 'specs'], (jshintConfig) => {
|
|||
'scripts/main.js',
|
||||
'scripts/requireConfig.js',
|
||||
'scripts/readmeImages.js',
|
||||
'scripts/standalone.js',
|
||||
];
|
||||
|
||||
const PREDEF = [
|
||||
|
|
|
|||
|
|
@ -0,0 +1,138 @@
|
|||
body {
|
||||
background: rgb(140, 185, 231);
|
||||
margin: 30px 30px 80px;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
article {
|
||||
max-width: 800px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
border-radius: 2px;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
article > header {
|
||||
margin: -20px -20px 30px;
|
||||
padding: 10px 20px;
|
||||
background: linear-gradient(#DDEEFF, #FFFFFF);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
article > header > h1 {
|
||||
margin: 0 0 10px;
|
||||
padding: 0;
|
||||
font: 3.5em 'Vollkorn', serif;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
article > header > .sequence-diagram {
|
||||
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
|
||||
.fancy {
|
||||
filter:
|
||||
sepia(1)
|
||||
hue-rotate(140deg)
|
||||
drop-shadow(0 5px 5px rgba(0, 64, 128, 0.5));
|
||||
}
|
||||
|
||||
article > h2 {
|
||||
margin: 35px -20px 10px;
|
||||
padding: 5px 20px 0;
|
||||
font: 2em 'Vollkorn', serif;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
article > h3 {
|
||||
margin: 25px -20px 10px;
|
||||
padding: 5px 20px 0;
|
||||
font: 1.5em 'Vollkorn', serif;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
article > p {
|
||||
margin: 20px 0;
|
||||
padding: 0;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
a:link, a:visited {
|
||||
color: #556688;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:hover, a:active {
|
||||
color: #5577AA;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.example-diagram {
|
||||
float: right;
|
||||
max-width: 300px;
|
||||
margin-left: 20px;
|
||||
background: #F8F8F8;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.region.focus rect {
|
||||
stroke-width: 5px;
|
||||
stroke: rgba(255, 128, 0, 0.5);
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #EEEEEE;
|
||||
margin: 5px 0;
|
||||
padding: 10px;
|
||||
overflow: auto;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
min-width: 150px;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
pre .tag {
|
||||
color: #BB44AA;
|
||||
}
|
||||
|
||||
pre .attr {
|
||||
color: #887722;
|
||||
}
|
||||
|
||||
pre .literal {
|
||||
color: #AA3322;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
position: sticky;
|
||||
bottom: -1px;
|
||||
margin: 40px -20px -20px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.2);
|
||||
background: #FFFFFF;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
text-align: right;
|
||||
font-size: 0.8em;
|
||||
box-shadow: 0 -2px 4px -4px #000000;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background: #EEEEEE;
|
||||
}
|
||||
Loading…
Reference in New Issue