quick-erd
Version:
quick and easy text-based ERD + code generator for migration, query, typescript types and orm entity
209 lines (207 loc) • 6.88 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>quick-erd</title>
<link rel="stylesheet" href="/style.css" />
<link rel="preload" href="/icons/attach-outline.svg" as="image" />
<link rel="preload" href="/icons/key-outline.svg" as="image" />
<link rel="preload" href="/icons/snow-outline.svg" as="image" />
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@bufferhead/nightowl@0.0.12/dist/nightowl.js"
></script>
</head>
<body data-mode="schema">
<header class="_hover">
<button>More</button>
<button
id="format"
title="Warning: comments will not be preserved! Refresh to restore input. (You can press [F] key as keyboard shortcut.)"
>
<kbd>F</kbd>ormat
</button>
<button id="normalize" title="You can press [N] key as keyboard shortcut">
<kbd>N</kbd>ormalize
</button>
<button
id="auto-place"
title="You can press [A] key as keyboard shortcut"
>
<kbd>A</kbd>uto place
</button>
<button
id="toggle-details"
title="To show or hide non-relational columns in each table. You can press [D] key as keyboard shortcut"
>
Toggle <kbd>D</kbd>etails
</button>
<button
id="schema-mode"
title="Switch to schema editing mode. You can press [S] key as keyboard shortcut"
>
<kbd>S</kbd>chema
</button>
<button
id="query-mode"
title="Switch to query building mode. You can press [Q] key as keyboard shortcut"
>
<kbd>Q</kbd>uery
</button>
<button
id="reset-zoom"
title="You can press [R] key or [0] key as keyboard shortcut"
>
<kbd>R</kbd>eset Zoom
</button>
<a
target="_blank"
href="https://github.com/beenotung/quick-erd"
style="float: right"
>
<button>About</button>
</a>
<div class="more">
<div class="more-group">
<button id="load-example">Load Example</button>
</div>
<div class="more-group">
<button
id="random-color"
title="Assign random color to each table name. You can press [C] key as keyboard shortcut"
>
Random <kbd>C</kbd>olor
</button>
<button
id="reset-color"
title="Reset default color to each table name"
>
Reset Color
</button>
</div>
<div class="more-group">
<button class="color-btn">
<label for="text-bg-color">Text BG</label>
<input id="text-bg-color" type="color" />
</button>
<button class="color-btn">
<label for="text-color">Text Color</label>
<input id="text-color" type="color" />
</button>
</div>
<div class="more-group">
<button class="color-btn">
<label for="diagram-bg-color">Diagram BG</label>
<input id="diagram-bg-color" type="color" />
</button>
<button class="color-btn">
<label for="diagram-text-color">Diagram Text</label>
<input id="diagram-text-color" type="color" />
</button>
</div>
<div class="more-group">
<button class="color-btn">
<label for="table-bg-color">Table BG</label>
<input id="table-bg-color" type="color" />
</button>
<button class="color-btn">
<label for="table-text-color">Table Text</label>
<input id="table-text-color" type="color" />
</button>
</div>
<div class="more-group">
<button id="share">Share via URL</button>
</div>
<div class="more-group deprecated" title="(deprecated)">
<button id="import">Import</button>
<button id="export">Export</button>
</div>
</div>
</header>
<main>
<div id="editor">
<textarea id="erdInput" placeholder="input table draft here"></textarea>
<div class="erd-controls">
<div class="server-mode">
<button class="save-btn" title="save to erd file on disk">
Save to Disk
</button>
</div>
<button class="copy-btn" title="copy erd text to clipboard">
Copy
</button>
</div>
<textarea
id="queryInput"
placeholder="generated query will be shown here"
></textarea>
<div class="output-controls">
<fieldset id="resultRowType">
<legend>result row type</legend>
<label title="toggle show/hide typescript type of result row"
>Show <input type="checkbox" />
</label>
<button class="copy-btn" title="copy result row type to clipboard">
Copy
</button>
</fieldset>
<fieldset id="sqlQuery">
<legend>sql query</legend>
<label title="toggle show/hide sql query"
>Show <input type="checkbox" />
</label>
<button class="copy-btn" title="copy sql query to clipboard">
Copy
</button>
</fieldset>
<fieldset id="knexQuery">
<legend>knex query</legend>
<label title="toggle show/hide knex query"
>Show <input type="checkbox" />
</label>
<button class="copy-btn" title="copy knex query to clipboard">
Copy
</button>
</fieldset>
<fieldset>
<legend>Select Fields</legend>
<button id="unselect-all">Unselect All</button>
</fieldset>
</div>
</div>
<div id="diagram">
<div class="message">
Placeholder for
<a
href="https://en.wikipedia.org/wiki/Entity%E2%80%93relationship_model"
>ERD</a
>
</div>
<div class="controls">
<div class="buttons">
<button
id="font-dec"
title="You can press [-] key as keyboard shortcut"
>
-
</button>
<span id="font-size">100%</span>
<button
id="font-inc"
title="You can press [+] key as keyboard shortcut"
>
+
</button>
</div>
</div>
<div id="tables-container">
<div data-table="_stub_"></div>
</div>
</div>
</main>
<script src="/erd-text.js"></script>
<script type="module" src="/main.js"></script>
</body>
</html>