|
|
<!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>
|
|
|
|
