Skip to content

Commit

Permalink
graph previews in documentation, various tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@skanaar
skanaar committed Sep 15, 2020
1 parent 8ac5745 commit a37e229
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 34 deletions.
77 changes: 50 additions & 27 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,7 @@ <h2>Association types</h2>
<b>dependency</b> --&gt;<br>
<b>dependency</b> &lt;--&gt;<br>
<b>generalization</b> -:&gt;<br>
<b>generalization</b> &lt;:-<br>
<b>implementation</b> --:&gt;<br>
<b>implementation</b> &lt;:--<br>
<b>composition</b> +-<br>
<b>composition</b> +-&gt;<br>
<b>aggregation</b> o-<br>
Expand Down Expand Up @@ -87,7 +85,7 @@ <h2>Directives</h2>
#ranker: network-simplex | tight-tree | longest-path<br>

<h2>Custom classifier styles</h2>
<h3>A directive that starts with "." define a classifier style. The style is written as a space separated list of modifiers and key/value pairs.</h3>
<p>A directive that starts with "." define a classifier style. The style is written as a space separated list of modifiers and key/value pairs.</p>

#.box: fill=#8f8 dashed<br>
#.blob: visual=ellipse<br>
Expand Down Expand Up @@ -180,77 +178,81 @@ <h2>Examples</h2>
<h2>Usage</h2>

<h3>Car has an Engine</h3>
<pre>[Car]-&gt;[Engine]</pre>
<pre append-nomnoml-preview>[Car]-&gt;[Engine]</pre>

<h3>Car owns an arbitrary number of blemished</h3>
<pre>[Car] +-&gt; 0..* [RustPatches]</pre>
<pre append-nomnoml-preview>[Car] +-&gt; 0..* [RustPatches]</pre>

<h3>Car knows its Manufacturer</h3>
<pre>[Car]o-&gt;[Manufacturer]</pre>
<pre append-nomnoml-preview>[Car]o-&gt;[Manufacturer]</pre>

<h3>Car depends on Fuel</h3>
<pre>[Car]--&gt;[Fuel]</pre>
<pre append-nomnoml-preview>[Car]--&gt;[Fuel]</pre>

<h3>Pickup inherits from Car</h3>
<pre>[Pickup]-:&gt;[Car]</pre>
<pre append-nomnoml-preview>[Pickup]-:&gt;[Car]</pre>

<h3>Car implements interface IVehicle</h3>
<pre>[Car]--:&gt;[IVehicle]</pre>
<pre append-nomnoml-preview>[Car]--:&gt;[IVehicle]</pre>

<h3>Paul and Ron have a named association</h3>
<pre>[Paul] friend - [Ron]</pre>
<pre append-nomnoml-preview>[Paul] friend - [Ron]</pre>

<h3>They both depend on each other</h3>
<pre>[Chicken]&lt;-&gt;[Egg]</pre>
<pre append-nomnoml-preview>[Chicken]&lt;-&gt;[Egg]</pre>

<h3>Car has some attributes</h3>
<pre>[Car|maxSpeed: Float;color: Color]</pre>
<pre append-nomnoml-preview>[Car|maxSpeed: Float;color: Color]</pre>

<h3>Car has several valves</h3>
<pre>[Car| valves: Valve\[\] ]</pre>
<pre append-nomnoml-preview>[Car| valves: Valve\[\] ]</pre>

<h3>Engine has an operation</h3>
<pre>[Engine||start()]</pre>
<pre append-nomnoml-preview>[Engine||start()]</pre>

<h3>Engine has internal parts</h3>
<pre>[Engine|
<pre append-nomnoml-preview>[Engine|
[Cylinder]->1[Piston]
[Cylinder]->2[Valve]
]</pre>

<h3>Engine is an abstract class</h3>
<pre>[&lt;abstract&gt;Engine||start()]</pre>
<pre append-nomnoml-preview>[&lt;abstract&gt;Engine||start()]</pre>

<h3>Car is in the package 'vehicles'</h3>
<pre>[&lt;package&gt;vehicles|[Car]]</pre>
<pre append-nomnoml-preview>[&lt;package&gt;vehicles|[Car]]</pre>

<h3>Car has an attached note</h3>
<pre>[Car]--[&lt;note&gt;only driven
<pre append-nomnoml-preview>[Car]--[&lt;note&gt;only driven
twice a month
]</pre>

<h3>Set font</h3>
<pre>#font: Times</pre>
<pre append-nomnoml-preview>#font: Times
Text with serifs
</pre>

<h3>Layout the diagram really tight</h3>
<pre>#fontSize: 8
<pre append-nomnoml-preview>#fontSize: 8
#spacing: 12
#padding: 3</pre>
#padding: 3
Lorem ipsum
dolor sit amet</pre>

<h3>Tables</h3>
<pre>[&lt;table&gt;Fruits|
<pre append-nomnoml-preview>[&lt;table&gt;Fruits|
Apples | 17 ||
Oranges | 4711
]</pre>

<h3>Create your own styles</h3>
<pre>#.box: fill=#8f8 dashed
<pre append-nomnoml-preview>#.box: fill=#8f8 dashed
[&lt;box&gt; GreenBox]</pre>

<h3>Divide into mupltiple files</h3>
<pre>#import: boxy_styles
[&lt;box&gt; GreenBox]
</pre>
<h3>Divide into multiple files</h3>
<pre publish-as-file="blobby_styles">#.blob: fill=pink</pre>
<pre append-nomnoml-preview>#import: blobby_styles
[&lt;blob&gt; Blobby]</pre>
</div>
</div>

Expand Down Expand Up @@ -326,6 +328,27 @@ <h3>Divide into mupltiple files</h3>

app.signals.on('source-changed', render)
app.filesystem.signals.on('updated', render)

function renderPreviews() {
var files = {}
var includes = document.querySelectorAll('[publish-as-file]')
for(var i=0; i<includes.length; i++) {
var name = includes[i].attributes.getNamedItem('publish-as-file').value
files[name] = _.unescape(includes[i].innerHTML)
}

var sources = document.querySelectorAll('[append-nomnoml-preview]')
for(var i=0; i<sources.length; i++) {
var srcEl = sources[i]
var src = nomnoml.processImports(_.unescape(srcEl.innerHTML), key => files[key])
var svg = nomnoml.renderSvg(src, document)
var div = document.createElement('div')
div.innerHTML = svg
srcEl.append(div)
}
}

renderPreviews()
</script>

<script src="additionals.js"></script>
Expand Down
13 changes: 6 additions & 7 deletions nomnoml.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -246,26 +246,25 @@ a:hover img {
font-family: Calibri, Helvetica, sans-serif
}
.content pre {
border-radius: 3px;
border-radius: 5px;
background: #eee8d5;
padding: 5px;
padding: 8px;
margin: 2px 0px;
font-family: Consolas, Monaco, monospace;
font-size: 14px;
}
.content h3{
display: block;
font-family: Calibri, Helvetica, sans-serif;
color: #93a1a1;
margin: 1em 0 0 0;
margin: 1.5em 0 0.5em 0;
font-size: inherit;
font-weight: normal;
color: #0008;
}
.content h2{
font-size: inherit;
display: block;
font-family: Calibri, Helvetica, sans-serif;
color: #93a1a1;
color: #0008;
margin: 1em -10px 10px -20px;
border-bottom: 1px solid #0004;
padding: 15px 0 7px 20px;
Expand All @@ -275,7 +274,7 @@ a:hover img {
font-weight: normal;
width: 40%;
font-family: Calibri, Helvetica, sans-serif;
color: #93a1a1;
color: #0008;
}

.content .btn .icon { margin-right: 6px; }
Expand Down

0 comments on commit a37e229

Please sign in to comment.