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.
|
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
|
This project includes a web page for editing the diagrams, but the core
|
||||||
logic is available as separate components which can be included in
|
logic is available as a component which can be
|
||||||
other projects.
|
[included in other projects](https://davidje13.github.io/SequenceDiagram/).
|
||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
|
|
||||||
|
|
@ -298,11 +298,13 @@ run a local HTTP server to ensure linting is successful. One option if
|
||||||
you have NPM installed is:
|
you have NPM installed is:
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
# Setup
|
npm run serve;
|
||||||
npm install http-server -g;
|
```
|
||||||
|
|
||||||
# Then
|
It is also good to rebuild the minified library when committing:
|
||||||
http-server;
|
|
||||||
|
```shell
|
||||||
|
npm run minify;
|
||||||
```
|
```
|
||||||
|
|
||||||
The current status of the tests on the master branch can be checked at
|
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="
|
<meta http-equiv="content-security-policy" content="
|
||||||
base-uri 'self';
|
base-uri 'self';
|
||||||
default-src 'none';
|
default-src 'none';
|
||||||
script-src 'self' https://cdnjs.cloudflare.com;
|
script-src 'self' 'unsafe-inline';
|
||||||
style-src 'self' https://cdnjs.cloudflare.com;
|
style-src 'self' https://fonts.googleapis.com;
|
||||||
img-src 'self' blob:;
|
font-src 'self' https://fonts.gstatic.com;
|
||||||
|
img-src 'self';
|
||||||
form-action 'none';
|
form-action 'none';
|
||||||
">
|
">
|
||||||
|
|
||||||
<title>Sequence Diagram</title>
|
<title>Sequence Diagram Plugin</title>
|
||||||
<link rel="icon" href="favicon.png">
|
<link rel="icon" href="favicon.png">
|
||||||
|
|
||||||
<link rel="stylesheet"
|
<link href="https://fonts.googleapis.com/css?family=Vollkorn" rel="stylesheet">
|
||||||
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.31.0/codemirror.min.css"
|
<link rel="stylesheet" href="styles/home.css">
|
||||||
integrity="sha256-Zg9EoB1hB8n8EVhx/D07lT5dD3ZZqjJbxlDmHx8jsMc="
|
|
||||||
crossorigin="anonymous"
|
|
||||||
>
|
|
||||||
|
|
||||||
<link rel="stylesheet"
|
<script src="lib/sequence-diagram.min.js"></script>
|
||||||
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>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
|
// Snippets:
|
||||||
data-main="scripts/main"
|
const elements = document.getElementsByClassName('example');
|
||||||
src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"
|
for(let i = 0; i < elements.length; ++ i) {
|
||||||
integrity="sha256-0SGl1PJNDyJwcV5T+weg2zpEMrh7xvlwO4oXgvZCeZk="
|
const el = elements[i];
|
||||||
crossorigin="anonymous"
|
const diagram = new SequenceDiagram(el.innerText);
|
||||||
></script>
|
diagram.dom().setAttribute('class', 'example-diagram');
|
||||||
|
el.parentNode.insertBefore(diagram.dom(), el);
|
||||||
|
}
|
||||||
|
|
||||||
<meta
|
}, {once: true});</script>
|
||||||
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>
|
</head>
|
||||||
<body>
|
<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>
|
</body>
|
||||||
</html>
|
</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 = {}) {
|
function convert(element, code = null, options = {}) {
|
||||||
|
if(element.tagName === 'svg') {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
if(code === null) {
|
if(code === null) {
|
||||||
code = element.innerText;
|
code = element.innerText;
|
||||||
} else if(typeof code === 'object') {
|
} else if(typeof code === 'object') {
|
||||||
|
|
@ -188,19 +192,37 @@ define([
|
||||||
code = options.code;
|
code = options.code;
|
||||||
}
|
}
|
||||||
const diagram = new SequenceDiagram(code, options);
|
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);
|
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;
|
return diagram;
|
||||||
}
|
}
|
||||||
|
|
||||||
function convertAll(root = null) {
|
function convertAll(root = null, className = 'sequence-diagram') {
|
||||||
if(!root) {
|
if(typeof root === 'string') {
|
||||||
root = document;
|
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) {
|
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, {
|
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/main.js',
|
||||||
'scripts/requireConfig.js',
|
'scripts/requireConfig.js',
|
||||||
'scripts/readmeImages.js',
|
'scripts/readmeImages.js',
|
||||||
|
'scripts/standalone.js',
|
||||||
];
|
];
|
||||||
|
|
||||||
const PREDEF = [
|
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