<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>{{SourceAssemblyName}} class diagrammer - netAmermaid</title>
<link rel="icon" type="image/x-icon" href="ILSpy.ico" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<style id="filter-width"></style>
</head>
<body class="container">
<!-- for animated background -->
<ul class="bubbles container">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="content" class="flx">
<form id="filter" class="flx col open">
<div class="flx gap">
<input id="pre-filter-types" placeholder="pre-filter" class="grow"
title="๐ I sift through the types for you. Feed me vanilla ๐ฆ plain text or ES/JS flavored ๐ค RegEx. ๐ญ Focus me with [Ctrl + K]. " />
<label for="type-select" class="grow">types</label>
<button type="button" class="icon" data-toggles="#info" title="๐ฏ๏ธ Shed light on the type selection"><span class="torch"></span></button>
</div>
<div id="info" class="scndry vertical collapse">
<p>
The <big>type picker</big> is โ focused when you open the app.
You can just <b>โจ๏ธ key in the first letter/s</b> of the type
you want to start your diagram with and <b>hit [Enter] to render</b> it.
</p>
<p>
After rendering you can ๐ <b>tap types</b> on the diagram
to update your selection and redraw.
This allows you to <b>explore the domain</b> along relations.
</p>
<p>
Don't forget that you can hold [Shift] to <b>โ range-select</b>
and [Ctrl] to <b>ยฑ add to or subtract from</b> your selection.
</p>
<p>
Note that the diagram has a ๐ <b>layout direction</b> -
i.e. it depends on how you <b>โ
sort selected types</b> using [Alt + Arrow Up|Down].
</p>
<p>
Changing the type selection or rendering options
updates the URL in the location bar. That means you can
<ul>
<li><b>๐ bookmark or ๐ฃ share the URL</b> to your diagram with whoever has access to this diagrammer,</li>
<li><b>access ๐ earlier diagrams</b> recorded in your ๐งพ browser history and</li>
<li><b>โฅ restore your type selection</b> to the picker from the URL using โณ Refresh [F5] if you lose it.</li>
</ul>
</p>
<h3>Looking for help with something else?</h3>
<p>
<b>Stop and spot the tooltips.</b> ๐ท They'll give you more info where necessary.
Get a hint for elements with helping tooltips using [Alt + i].
</p>
<p>Alternatively, find helpful links to the docs and discussions in the
<a href="#build-info" class="toggle">build info <img src="ILSpy.ico" /> โช</a></p>
<p>If you find this helpful and want to share your ๐บ screen and ๐ wisdom on how it works
with a ๐ฆ newcomer, try toggling <b>presentation mode</b> using [Ctrl + i].</p>
</div>
<select multiple id="type-select" class="grow" title="๐ฅข pick types to include in your diagram"></select>
<fieldset id="inheritance" class="scndry flx" title="You may find these options useful to reason about type inheritance - probably less so when looking at entity relations.">
<legend>show inherited</legend>
<span class="scndry flx" title="Render direct base types.">
<input type="checkbox" id="show-base-types" checked />
<label for="show-base-types">types</label>
</span>
<span class="scndry flx" title="Render direct interfaces.">
<input type="checkbox" id="show-interfaces" checked />
<label for="show-interfaces">interfaces</label>
</span>
<span class="scndry flx" title="Render members inherited from ancestor types - unless those are also selected and rendered in detail.">
<input type="checkbox" id="show-inherited-members" checked />
<label for="show-inherited-members">members</label>
</span>
</fieldset>
<fieldset id="direction" class="scndry flx" title="[Ctrl + arrow keys] You may want to change this depending on your screen or printer and the size of the diagram.">
<legend>layout direction</legend>
<input type="radio" name="direction" value="RL" id="dir-rl" />
<label for="dir-rl">โฎ</label>
<input type="radio" name="direction" value="TB" id="dir-tb" />
<label for="dir-tb">โฎ</label>
<input type="radio" name="direction" value="BT" id="dir-bt" />
<label for="dir-bt">โฎ</label>
<input type="radio" name="direction" value="LR" id="dir-lr" checked />
<label for="dir-lr">โฎ</label>
</fieldset>
<div id="actions" class="flx spaced">
<button title="Render the selected types. [Enter] with the side bar in focus will do."
type="submit" id="render" disabled><span class="trawl-net"></span> Cast the diagram</button>
<button type="button" class="icon" data-toggles="#exportOptions" id="exportOptions-toggle" hidden title="toggle ๐ฅก export options">๐ฃ</button>
</div>
<div id="exportOptions" class="scndry vertical collapse aligned spaced flx gap col">
<div class="flx gap" title="Note that you can also use your browser's Print function [Ctrl + P] to export to PDF or paper or split up the diagram into multiple pages.">
<button type="button" id="save" data-assembly="{{SourceAssemblyName}}" title="[Ctrl + S] Saves the diagram in the selected format using a generated name.">๐พ Save</button>
<label>or</label>
<button type="button" id="copy" title="[Ctrl + C] Copies the diagram in the selected format to your clipboard for you to paste directly into a messenger, word- or image processor.">๐ Copy to clipboard</button>
</div>
<div class="flx">
<label>as</label>
<span class="flx" title="Exports the diagram as SVG to render in an HTML document or SVG-enabled word processor.">
<input type="radio" name="saveAs" value="svg" id="saveAs-svg" />
<label for="saveAs-svg">svg</label>
</span>
<span class="flx" title="Exports the diagram as a base-64 encoded PNG.">
<input type="radio" name="saveAs" value="png" id="saveAs-png" checked />
<label for="saveAs-png">png</label>
</span>
<span class="flx" title="Exports the mermaid syntax for the diagram.">
<input type="radio" name="saveAs" value="mmd" id="saveAs-mmd" />
<label for="saveAs-mmd">mmd</label>
</span>
</div>
<div id="dimensions" class="vertical open collapse">
<fieldset title="Applied when saving and in (unscalable) image format. Note these settings indirectly determine the resolution.">
<legend>png dimensions</legend>
<div class="flx">
<input type="radio" name="dimension" value="auto" id="dimension-current" checked />
<label for="dimension-current">current</label>
<input type="radio" name="dimension" value="scale" id="dimension-scale" />
<label for="dimension-scale">scale to fixed</label>
</div>
<div id="scale-controls" class="flx aligned">
<input type="radio" name="scale" value="width" id="scale-width" checked disabled />
<label for="scale-width">width</label>
<input type="radio" name="scale" value="height" id="scale-height" disabled />
<label for="scale-height">height</label>
<div class="scale-size flx aligned">
<label for="scale-size">of</label>
<input type="text" id="scale-size" value="1080" disabled />
<label for="scale-size">px</label>
</div>
</div>
</fieldset>
</div>
</div>
</form>
<button type="button" class="icon" id="filter-toggle" title="๐งโโ๏ธ Let me lay it out for you.
๐ Tap me to toggle the side bar [Ctrl + B]. ๐ Grab and drag me if you need โข more space for the type selection.">โฅ</button>
<div id="output" class="grow" data-title="๐งโโ๏ธ I'm not your basic diagram. ๐ Tap my types to toggle them. ๐ Zoom me with [Ctrl + mouse wheel]. ๐ Grab and drag me around to pan after. ๐งฝ Reset zoom and pan with [Ctrl + 0]."></div>
</div>
<div id="netAmermaid" class="flx col gap" title="๐ build info and project links">
<div id="toaster" class="flx col gap"></div>
<div class="build-info flx">
<div id="build-info" class="scndry horizontal collapse flx col">
<span>built from {{SourceAssemblyName}} v{{SourceAssemblyVersion}} and mermaid.js from CDN
<a target="_blank" href="https://cdn.jsdelivr.net/npm/mermaid@11.4.0/dist/mermaid.min.js" download="mermaid.min.js"
title="For off-line use, download a copy and save it with the diagrammer - at the bottom of which you find a script with a reference to the mermaid CDN. Replace its 'src' with the path to your local copy.">๐ฅ</a>
</span>
<span>
using <a class="project" target="_blank" href="{{RepoUrl}}#readme" title="๐คฟ get learned and find out about or ๐ฑ fork the project">netAmermaid</a> v{{BuilderVersion}}
<a target="_blank" href="{{RepoUrl}}/tree/v{{BuilderVersion}}#readme" title="the manual for v{{BuilderVersion}}">๐</a>
<a target="_blank" href="{{RepoUrl}}/discussions" title="๐ค ask questions, share and discuss ๐ก ideas">๐ฌ</a>
<a target="_blank" href="{{RepoUrl}}/issues" title="๐ฆ feed bugs to the fishes and request ๐ฑ new features"><span class="mano-a-borsa"></span></a>
<a target="_blank" href="{{RepoUrl}}/releases/latest" title="โ๏ธ download the latest bits to ๐ generate better diagrammers">๐ฉ๏ธ</a>
</span>
</div>
<img data-toggles="#build-info" src="ILSpy.ico" />
</div>
</div>
<div id="pressed-keys" class="hidden"></div>
<div id="mouse" hidden></div>
<script id="model" type="application/json">{{Model}}</script>
<script src="https://cdn.jsdelivr.net/npm/mermaid@11.4.0/dist/mermaid.min.js"></script>
<script src="script.js"></script>
</body>
</html>