mermaid`${td_mermaid_text}`
html`<pre>${td_mermaid_text}</pre>`
td_mermaid_text = `
graph TD;
${fks.map((r) => `${r.table_from}-->${r.table_to};`).join("\n ")}
`
md`## Now try an entity relationship diagram
https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram`
mermaid`
%%{config: { 'fontFamily': 'Menlo', 'fontSize': 18, 'fontWeight': 400} }%%
${er_mermaid_text}`
html`<pre>${er_mermaid_text}</pre>`
er_mermaid_text = `
erDiagram
${tables
.map(
(table) =>
`${fks
.filter((fk) => fk.table_from == table)
.map(
(fk) => ` ${fk.table_from} ||--o{ ${fk.table_to} : ${fk.column_from}`
)
.join("\n")}\n ${table} {\n ${columns
.filter((o) => o.table == table)
.map((o) => `column ${o.column}`)
.join("\n ")}\n }`
)
.join(" \n")}
`
mermaidJs = require("mermaid@8.14.0/dist/mermaid.min.js")
params = new URL(location).searchParams
initial_url = params.get('url') || 'https://github-to-sqlite.dogsheep.net/github'
tables = [
...new Set([...fks.map((x) => x.table_from), ...fks.map((x) => x.table_to)])
]
columns = fks.map(x => ({ table: x.table_from, column: x.column_from }))
sql = `
select
sqlite_master.name as table_from,
fk_info.[from] as column_from,
fk_info.[table] as table_to,
fk_info.[to] as column_to
from
sqlite_master
join pragma_foreign_key_list(sqlite_master.name) as fk_info
order by
sqlite_master.name
`;
fks = await fetch(
`${database_url}.json?sql=${encodeURIComponent(sql)}&_shape=array`
).then((r) => r.json())
import {form} from "@mbostock/form-input"
mermaid = function (...values) {
const div = viewof mermaidContainer; //document.getElementById('mermaid');
if (!div) {
throw 'Cannot find div with id "mermaid"';
}
const src = String.raw(...values).trim();
const id = "mmd" + Math.round(Math.random() * 10000);
div.append(html`<div id="${id}" />`);
try {
const result = mermaidJs.render(id, src, undefined);
return svg([result]);
} catch (ex) {
console.error(ex);
throw ex;
}
}
viewof mermaidContainer = html`<div id="mermaid" />`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
