-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy patherd.html
More file actions
222 lines (216 loc) · 11.6 KB
/
Copy patherd.html
File metadata and controls
222 lines (216 loc) · 11.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>proc>flow — ERD</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="top">
<div class="brand-lockup">
<h1 class="mark">proc<span class="caret">></span>flow</h1>
<p class="tagline">Entity relationship diagram</p>
</div>
<nav class="mode-switch" aria-label="Page">
<a class="mode-link" href="index.html">Flowchart</a>
<a class="mode-link active" href="erd.html" aria-current="page">ERD</a>
</nav>
<details class="privacy-disclosure">
<summary>
<span class="privacy-icon" aria-hidden="true">🔒</span>
Local only
</summary>
<div class="privacy-popover">
<strong>Your DDL stays in this browser.</strong>
Procflow does not connect to a database, upload schema definitions, or
send anything to an API. Imported files remain in this tab and are
discarded when it closes.
</div>
</details>
<div class="top-actions">
<input id="erd-file-input" type="file" accept=".sql,.ddl,.txt,text/plain" multiple hidden>
<button class="btn" id="btn-erd-import">Import DDL</button>
<button class="btn" id="btn-erd-sample">T-SQL sample</button>
<button class="btn" id="btn-erd-sample-db2">DB2 sample</button>
</div>
</header>
<main class="wrap">
<section class="pane">
<div class="pane-head editor-head"><span class="pane-title">Schema DDL</span>
<div class="editor-actions" style="margin-left:auto">
<button class="btn quiet" id="btn-erd-clear">Clear</button>
<button class="btn primary" id="btn-erd-draw"
aria-keyshortcuts="Control+Enter Meta+Enter"
title="Refresh ERD (Ctrl or Cmd + Enter)">
Refresh <kbd>Ctrl ↵</kbd>
</button>
</div>
</div>
<div class="editor">
<div class="gutter" id="erd-gutter">1</div>
<textarea id="erd-sql" spellcheck="false" placeholder="Paste CREATE TABLE / ALTER TABLE DDL — T-SQL, PostgreSQL, DB2 or SQLite. Or press Load sample. Declared PRIMARY KEY, UNIQUE, and FOREIGN KEY constraints become the diagram."></textarea>
</div>
<div class="large-input-notice" id="erd-large-notice" role="status"
aria-live="polite" hidden></div>
<div class="readout" aria-live="polite">
<div class="status-summary">
<div class="analysis-health" id="erd-stats">
<div class="health-item"><span>Tables</span><b id="erd-tables">0</b></div>
<div class="health-item"><span>Views</span><b id="erd-views">0</b></div>
<div class="health-item"><span>Columns</span><b id="erd-columns">0</b></div>
<div class="health-item"><span>Relations</span><b id="erd-relationships">0</b></div>
<div class="health-item"><span>Unresolved</span><b id="erd-unresolved">0</b></div>
<div class="health-item"><span>Diagnostics</span><b id="erd-diagnostics">0</b></div>
</div>
</div>
<div class="msg" id="erd-msg"></div>
</div>
</section>
<div class="splitter" id="splitter" role="separator" aria-orientation="vertical"
aria-label="Resize DDL and diagram panels" tabindex="0"></div>
<section class="pane">
<div class="pane-head output-head">
<div class="tabs" role="tablist">
<button class="tab" id="tab-erd-diagram" role="tab" aria-selected="true" aria-controls="view-erd-diagram">Diagram</button>
<button class="tab" id="tab-erd-mermaid" role="tab" aria-selected="false" aria-controls="view-erd-mermaid">Mermaid ERD</button>
</div>
<div class="command-menus">
<label class="opt erd-find-label">Find
<input type="search" id="erd-find" placeholder="table or column" spellcheck="false"
aria-label="Find a table or column">
<span class="erd-find-count" id="erd-find-count" aria-live="polite"></span>
</label>
<label class="opt"><input type="checkbox" id="erd-compact"> Compact boxes</label>
<details class="command-menu" id="erd-layout-menu">
<summary class="btn">Layout</summary>
<div class="command-menu-panel export-actions" aria-label="ERD layout actions">
<button class="menu-action primary-action" id="btn-erd-auto-arrange">Auto arrange</button>
<label class="opt erd-layout-direction">Direction
<select id="erd-layout-orientation">
<option value="auto">Auto</option>
<option value="LR">Left → right</option>
<option value="TB">Top → bottom</option>
</select>
</label>
<label class="opt erd-layout-direction">Spacing
<select id="erd-layout-density">
<option value="compact">Compact</option>
<option value="normal">Normal</option>
<option value="roomy">Roomy</option>
</select>
</label>
<button class="menu-action" id="btn-erd-reset-layout">Reset to declaration order</button>
<button class="menu-action" id="btn-erd-save-layout">Save layout to this browser</button>
<button class="menu-action" id="btn-erd-restore-layout">Restore saved layout</button>
<button class="menu-action" id="btn-erd-forget-layout">Forget saved layout</button>
<button class="menu-action" id="btn-erd-unpin-all">Unpin all</button>
<input id="erd-layout-file-input" type="file" accept=".json,application/json" hidden>
<button class="menu-action" id="btn-erd-export-layout">Export layout file</button>
<button class="menu-action" id="btn-erd-import-layout">Import layout file</button>
<p class="ws-note" id="erd-layout-status">No layout saved in this browser.</p>
</div>
</details>
<button class="btn" id="btn-erd-query" aria-pressed="false"
title="Pick columns on the diagram; the SQL appears in a floating window">Query builder<span class="tab-count" id="erd-query-count" hidden></span></button>
<button class="btn" id="btn-erd-copy">Copy Mermaid</button>
</div>
</div>
<div class="view active" id="view-erd-diagram" role="tabpanel" aria-labelledby="tab-erd-diagram">
<div id="erd-canvas">
<div class="erd-empty" id="erd-empty">
<p>Paste DDL on the left. The entity map updates as you type.</p>
</div>
<div class="erd-space" id="erd-space"></div>
<div class="erd-cards" id="erd-cards"></div>
<svg class="erd-overlay" id="erd-overlay" aria-hidden="true"></svg>
</div>
<div class="zoom erd-zoom" role="group" aria-label="Diagram zoom">
<button class="btn" id="erd-z-out" title="Zoom out">−</button>
<button class="btn" id="erd-z-in" title="Zoom in">+</button>
<button class="btn" id="erd-z-fit" title="Fit the whole estate; with a table selected, fit that table and its declared neighbours">Fit</button>
<span class="erd-zoom-val" id="erd-zoom-val">100%</span>
</div>
<aside class="erd-inspector" id="erd-inspector" hidden aria-live="polite"></aside>
<section class="qb-float" id="qb-float" hidden role="dialog"
aria-labelledby="qb-title">
<header class="qb-float-head" id="qb-drag">
<h3 id="qb-title">Query builder</h3>
<span class="qb-plan-summary" id="qb-summary" aria-live="polite"></span>
<button class="btn quiet" id="btn-qb-clear">Clear</button>
<button class="qb-icon" id="btn-qb-collapse" aria-label="Collapse query builder"
title="Collapse">−</button>
<button class="qb-icon" id="btn-qb-close" aria-label="Close query builder"
title="Close">×</button>
</header>
<div class="qb-float-body" id="qb-float-body">
<div class="qb-toolbar">
<label class="opt">Dialect
<select id="qb-dialect" aria-label="SQL dialect">
<option value="tsql">T-SQL (SQL Server)</option>
<option value="postgres">PostgreSQL</option>
<option value="db2">DB2</option>
<option value="sqlite">SQLite</option>
</select>
</label>
<label class="opt"><input type="checkbox" id="qb-distinct"> Distinct</label>
<label class="opt"><input type="checkbox" id="qb-only-used"> Only used tables</label>
<label class="opt">Rows
<select id="qb-limit" aria-label="Row limit">
<option value="0">All</option>
<option value="100">100</option>
<option value="1000">1000</option>
</select>
</label>
<label class="opt"><input type="checkbox" id="qb-comments" checked> Comments</label>
<button class="btn" id="btn-qb-teach" aria-pressed="false"
title="Click two columns on the diagram to teach a join; the same table twice creates a self join">Teach join</button>
<details class="command-menu" id="qb-query-menu">
<summary class="btn">Query</summary>
<div class="command-menu-panel export-actions" aria-label="Query file actions">
<label class="opt qb-name">Name
<input type="text" id="qb-query-name" placeholder="orders by customer"
maxlength="80" spellcheck="false" aria-label="Query name for exports">
</label>
<button class="menu-action" id="btn-qb-save">Save to this browser</button>
<button class="menu-action" id="btn-qb-restore">Restore saved</button>
<button class="menu-action" id="btn-qb-forget">Forget saved</button>
<button class="menu-action" id="btn-qb-export">Export query file</button>
<button class="menu-action" id="btn-qb-import">Import query file</button>
<button class="menu-action" id="btn-qb-download">Download .sql</button>
<p class="ws-note" id="qb-store-status">Picks are session state; save or export to keep them.</p>
</div>
</details>
<button class="btn primary" id="btn-qb-copy">Copy SQL</button>
</div>
<div class="qb-picks" id="qb-picks"></div>
<p class="qb-status" id="qb-status" role="status" aria-live="polite"></p>
<pre id="qb-sql-out"></pre>
<div class="qb-plan-body" id="qb-plan-body"></div>
<input type="file" id="qb-query-file" accept=".json,application/json" hidden>
</div>
<button type="button" class="qb-resize" id="qb-resize"
aria-label="Resize query builder"
title="Drag to resize (arrow keys also work)"></button>
</section>
</div>
<div class="view" id="view-erd-mermaid" role="tabpanel" aria-labelledby="tab-erd-mermaid">
<pre id="erd-mermaid-out">erDiagram</pre>
</div>
</section>
</main>
<footer>Declared constraints only — relationships come from PRIMARY KEY / UNIQUE / FOREIGN KEY declarations in the DDL, never inferred from queries. Unresolved references stay explicit.</footer>
<script src="dist/src/tokenizer.js"></script>
<script src="dist/src/schema.js"></script>
<script src="dist/src/erd.js"></script>
<script src="dist/src/query.js"></script>
<script src="dist/src/query-store.js"></script>
<script src="dist/src/workspace.js"></script>
<script src="dist/src/ui/large-input.js"></script>
<script src="dist/src/ui/splitter.js"></script>
<script src="dist/src/ui/clipboard.js"></script>
<script src="dist/src/ui/erd-query-view.js"></script>
<script src="dist/src/ui/erd-query.js"></script>
<script src="dist/src/ui/erd-page.js"></script>
</body>
</html>