## How to visualize your schema(s)
Schema Visualizer can visualize multiple schemas – each schema will have its own URL.
A schema configuration lives in [its own folder](https://github.com/sqlhabit/sql_schema_visualizer/tree/main/src/config/databases) and contains a bunch of [simple JSON files](https://github.com/sqlhabit/sql_schema_visualizer/tree/main/src/config/databases/bindle).
Here's how you can import your schema:
### Step 1. Clone and set up the repo
Clone the repo:
```bash
git clone https://github.com/sqlhabit/sql_schema_visualizer.git
cd sql_schema_visualizer
```
Install dependencies:
```bash
npm install
```
:bulb: You might need to install [nvm](https://github.com/nvm-sh/nvm#installing-and-updating) as well to make sure you're not using an old Node version.
### Step 2. Reset schema configuration
By default, Schema Visualizer contains [SQL Habit's](https://www.sqlhabit.com) dataset schemas. Let's delete all before we import new schemas:
```bash
npm run reset
```
### Step 3. Export your schema into a CSV file
A schema config consists of [tables](https://github.com/sqlhabit/sql_schema_visualizer/tree/main/src/config/databases/bindle/tables), [edges](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/edges.json), [table positions](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/tablePositions.json) and [schema colors](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/schemaColors.json).
Good news is that we can import tables using an SQL query. :rocket:
Pick a query for your database type and save the output to a CSV file like `my_schema.csv`. Put it to the root folder (next to [the `schema.csv.template` file](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/schema.csv.template)).
#### Postgres / Redshift
```sql
SELECT
t.table_schema,
t.table_name,
c.column_name,
c.data_type,
c.ordinal_position
FROM information_schema.tables t
LEFT JOIN information_schema.columns c
ON t.table_schema = c.table_schema
AND t.table_name = c.table_name
WHERE
t.table_schema NOT IN ('information_schema', 'pg_catalog')
AND t.table_name NOT IN ('schema_migrations', 'ar_internal_metadata')
ORDER BY 1, 2, 5
```
#### BigQuery
```sql
SELECT
c.table_schema,
c.table_name,
c.column_name,
c.data_type,
c.ordinal_position
FROM %PROJECT_NAME%.%DATASET_NAME%.INFORMATION_SCHEMA.COLUMNS c
JOIN %PROJECT_NAME%.%DATASET_NAME%.INFORMATION_SCHEMA.TABLES t
ON c.table_schema = t.table_schema
AND c.table_name = t.table_name
WHERE
c.table_schema NOT IN ('INFORMATION_SCHEMA')
ORDER BY 1, 2, 5
```
:mag: Make sure to replace `%PROJECT_NAME%.%DATASET_NAME%` with proper values.
#### Snowflake
```sql
SELECT
c.table_schema,
c.table_name,
c.column_name,
c.data_type,
c.ordinal_position
FROM information_schema.columns c
JOIN information_schema.tables t
ON c.table_schema = t.table_schema
AND c.table_name = t.table_name
WHERE
c.table_schema NOT IN ('INFORMATION_SCHEMA')
AND t.table_type = 'BASE TABLE'
ORDER BY 1, 2, 5
```
#### MySQL
```sql
SELECT
c.table_schema,
c.table_name,
c.column_name,
c.data_type,
c.ordinal_position
FROM information_schema.columns c
LEFT JOIN information_schema.views v
ON v.table_schema = c.table_schema
AND v.table_name = c.table_name
WHERE
c.table_schema NOT IN ('sys','information_schema', 'mysql', 'performance_schema')
AND c.table_name NOT IN ('schema_migrations', 'ar_internal_metadata')
ORDER BY 1, 2, 5
```
#### [SAP ASE](https://github.com/sqlhabit/sql_schema_visualizer/issues/8)
```sql
SELECT
'public' as table_schema,
so.name as table_name,
sc.name as column_name,
sc.type as data_type,
sc.colid as ordinal_position
FROM syscolumns sc
INNER JOIN sysobjects so
ON sc.id = so.id
WHERE so.type = 'U'
```
### Step 4. Import schema
Now we can import tables. The argument of the `npm run import` command is your CSV file name:
```bash
npm run import my_schema
```
You should see table JSON files added to the `src/config/databases/my_schema/tables` folder.
Let's spin up a dev server and see our tables [in the browser](http://localhost:3000/):
```bash
npm run start
```
### Step 5. Configure your schema
#### A. Set primary keys
To show a :key: icon next to the column name, add the `key` param to a column definition. Here's an example from [the `users` table](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/tables/users.json):
```json
{
"name": "id",
"key": true,
"description": "Unique identifier of a user.",
"type": "number"
}
```
#### B. Add edges
Define edges in [the `src/config/edges.json` file](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/edges.json):
Here's an example for **has one** relation:
```json
{
"source": "users",
"sourceKey": "id",
"target": "profiles",
"targetKey": "user_id",
"relation": "hasOne"
}
```
and **has many** relation:
```json
{
"source": "users",
"sourceKey": "id",
"target": "purchases",
"targetKey": "user_id",
"relation": "hasMany"
}
```
#### C. Add schema colors
You can set custom header colors for tables that belongs to the same schema in [the `schemaColors.json` file](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/schemaColors.json). Here's an example:
```json
{
"DEFAULT": "#91C4F2",
"public": "#BEB8EB",
"adjust": "#AFA2FF",
"helpers": "#75C9C8",
"web_analytics": "#F6BDD1",
"mobile_analytics": "#FFD791"
}
```
#### D. Add table positions
Table positions are defined in the [`tablePositions.json` file](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/tablePositions.json):
```json
{
"adjust.callbacks": {
"x": 864,
"y": -192
},
"helpers.dates": {
"x": 512,
"y": 528
},
"mobile_analytics.events": {
"x": 656,
"y": -336
}
```
After you import a schema, every table will have a default position set in the [`tablePositions.json`](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/tablePositions.json) file.
There's no need to update them manually. Instead:
1. Open Schema Visualizer [http://localhost:3000](http://localhost:3000).
2. Drag table nodes around to find a perfect arrangement.
3. **CTRL** + **P**. It copies node positions JSON to your clipboard.
4. Paste (**CMD** + **V**) JSON with positions to the [`tablePositions.json`](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/tablePositions.json) file of your schema.
5. PROFIT :beers:
#### E. Add table and column descriptions
Table and column descriptions are visible if you press `CMD` key and hover over a table or column name.
Add custom copy to the `"description"` keys [in table config files](https://github.com/sqlhabit/sql_schema_visualizer/tree/main/src/config/databases/bindle/tables/users.json). Here's an example:
```json
{
"name": "users",
"description": "This table contains all user records of Bindle.",
"columns": [
{
"name": "id",
"key": true,
"description": "Unique identifier of a user.",
"type": "number"
}
]
}
```
### Publish your schema online
#### Building your Schema Visualizer
Once you're finished with config file, build the project and upload the files from the [`/build`](https://github.com/sqlhabit/sql_schema_visualizer/tree/main/build) folder to your hosting of choice:
```sh
npm build
```
I highly recommend https://surge.sh/. It'll take you ~2 minutes to deploy your schema online:
1. `npm install --global surge`.
2. `cd build`
3. `surge`
4. PROFIT :beers:
## Contributing
You're more than welcome to contribute. In fact, I'm really looking forward to it! :rocket:
Just make sure to check out the [contribution guidelines](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/CONTRIBUTING.md). :pray:
## Under the hood
Schema Visualizer is built with [ReactFlow](https://reactflow.dev/).
Every table is a ReactFlow [Custom Node](https://reactflow.dev/docs/guides/custom-nodes/) with custom [Markers](https://reactflow.dev/docs/examples/edges/markers/) (those SVG icons with dot and fork).
Here's [a ReactFlow sandbox example](https://github.com/wbkd/react-flow-example-apps/tree/main/reactflow-create-react-app) of Custom Nodes.
### Config files
It all starts with plain [JSON config files](https://github.com/sqlhabit/sql_schema_visualizer/tree/main/src/config). There're 4 of them:
* [tables](https://github.com/sqlhabit/sql_schema_visualizer/tree/main/src/config/databases/bindle/tables)
* [edges](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/edges.json)
* [tablePositions](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/tablePositions.json)
* [schemaColors](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/schemaColors.json)
Later they're translated into Nodes and Edges digestible by ReactFlow.
### Nodes and Handles
ReactFlow draws SVG edges between custom [Table Nodes](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/Visualizer/components/TableNode.tsx#L64).
Those edges start and end in ReactFlow Handle's. Every table column row has 2 handles – left and right. :bulb: A handle could be either **source** (for an outgoing edge) or a **target** (for an incoming edge). Handles are configured [based on the edges config](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/Visualizer/helpers/initializeNodes.ts#L4).
### Edges
As you can see, edges are dynamically change handles and orientation depending on relative node positions. That way it's less config to maintain, here're [helper](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/Visualizer/helpers/calculateTargetPosition.ts) [functions](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/Visualizer/helpers/calculateSourcePosition.ts) that take care of that.
### More details
[Here's the entry file](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/Visualizer/index.tsx) to the ReactFlow app.
Have fun exploring the app, it was a pleasure to build! If you have a question – open a [new issue](https://github.com/sqlhabit/sql_schema_visualizer/issues/new/choose). :beers:
## Development
You'll need to install dependencies and start a dev server:
```sh
npm install
npm start
```
You'll find the running visualizer at [http://localhost:3000](http://localhost:3000).
## Testing
Tests are written with the [React Testing Library](https://testing-library.com/docs/react-testing-library/example-intro). Run all of them via
```sh
npm test
```
## Maintainers
Schema Visualizer is a project of Anatoli of [SQL Habit](https://www.sqlhabit.com/). Hi from Berlin! :wave: :beers:
Anatoli Makarevich • [Twitter](https://twitter.com/makaroni4) • [Github](https://github.com/makaroni4)
## License
SQL Schema Visualizer is [MIT licensed](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/LICENSE).
================================================
FILE: bin/create_db_pages
================================================
#!/usr/bin/env node
const databases = require("../src/config/databases.json");
const fs = require("fs").promises;
// design_notes/0001_using_regular_links.md
(async () => {
await fs.mkdir("build/databases");
for (const databaseSlug of Object.keys(databases)) {
await fs.copyFile("build/index.html", `build/databases/${databaseSlug}.html`);
};
})();
================================================
FILE: bin/import
================================================
#!/usr/bin/env node
const fs = require("fs").promises;
const SCHEMA_COLORS_TEMPLATE_FILE = "src/config/schemaColors.json.template";
const TABLES_INDEX_FILE_TEMPLATE = "src/config/tables.ts.template";
const DATABASES_FILE = "src/config/databases.json";
const DATA_TYPES = {
"character varying": "text",
"timestamp without time zone": "timestamp"
}
const adjustDataTypeName = (rawName) => {
if(DATA_TYPES[rawName]) {
return DATA_TYPES[rawName];
} else {
return rawName;
}
};
const readTableData = async (databaseName) => {
const schema = await fs.readFile(`${databaseName}.csv`, "utf8");
const schemaData = schema.replaceAll('"', '').trim().split("\n").map(row => row.split(","));
const [headers] = schemaData.splice(0, 1);
const data = schemaData.map(row => {
return Object.fromEntries(headers.map((key, index) => [key, row[index]]));
});
data.map(o => o.data_type = adjustDataTypeName(o.data_type));
return data;
};
const importSchemaColors = async (databaseName, schemas) => {
const schemasTemplateFile = await fs.readFile(SCHEMA_COLORS_TEMPLATE_FILE, "utf8");
const defaultSchemaColors = JSON.parse(schemasTemplateFile);
let schemaColors = Object.keys(schemas).reduce((acc, schemaName) => {
acc[schemaName] = defaultSchemaColors.DEFAULT;
return acc;
}, {});
schemaColors = {
...defaultSchemaColors,
...schemaColors
};
await fs.writeFile(`src/config/databases/${databaseName}/schemaColors.json`, JSON.stringify(schemaColors, null, 2), "utf8");
};
const importTablePositions = async (databaseName, tables) => {
const tableCount = Object.keys(tables).length;
const tablesPerRow = Math.round(Math.sqrt(tableCount));
const tablePositions = Object.keys(tables).reduce((acc, tableName, index) => {
const fullTableName = tableName.includes(".") ? tableName : `public.${tableName}`;
const yPosition = Math.floor(index / tablesPerRow);
const xPosition = index % tablesPerRow;
acc[fullTableName] = {
x: xPosition * 300,
y: yPosition * 450
};
return acc;
}, {});
await fs.writeFile(`src/config/databases/${databaseName}/tablePositions.json`, JSON.stringify(tablePositions, null, 2), "utf8");
};
const importTableConfigs = async (databaseName, tables) => {
await fs.mkdir(`src/config/databases/${databaseName}/tables`);
Object.keys(tables).forEach(async tableName => {
const tableFile = `src/config/databases/${databaseName}/tables/${tableName}.json`;
const tableConfig = {
name: tableName,
description: "",
schemaColor: "#91C4F2",
columns: []
};
tables[tableName].forEach(row => {
const columnName = row[0];
const columnType = row[1];
tableConfig.columns.push({
name: columnName,
description: "",
type: columnType
});
});
await fs.writeFile(tableFile, JSON.stringify(tableConfig, null, 2), "utf8");
});
};
// https://ourcodeworld.com/articles/read/608/how-to-camelize-and-decamelize-strings-in-javascript
const camelize = (text) => {
return text.replace(/\W/, "-").replace(/^([A-Z])|[\s-_]+(\w)/g, function(match, p1, p2, offset) {
if (p2) return p2.toUpperCase();
return p1.toLowerCase();
});
};
const importEdgeConfigs = async (databaseName, tables) => {
await fs.writeFile(`src/config/databases/${databaseName}/edges.json`, JSON.stringify([], null, 2), "utf8");
};
const importTablesIndexFile = async (databaseName, tables) => {
const importStatements = [];
const names = [];
Object.keys(tables).forEach(tableName => {
const tableConfigFileName = `${camelize(tableName)}Table`;
importStatements.push(`import ${tableConfigFileName} from "./tables/${tableName}.json";`);
names.push(` ${tableConfigFileName}`);
});
const loadTablesTemplate = await fs.readFile(TABLES_INDEX_FILE_TEMPLATE, "utf8");
const loadTablesHelper = loadTablesTemplate
.replace("%TABLE_FILES%", importStatements.join("\n"))
.replace("%TABLE_NAMES%", names.join(",\n"))
await fs.writeFile(`src/config/databases/${databaseName}/tables.ts`, loadTablesHelper, "utf8");
};
const addDatabaseEntry = async (databaseName) => {
const rawDatabases = await fs.readFile(DATABASES_FILE, "utf8");
const databases = JSON.parse(rawDatabases);
databases[databaseName] = {
name: databaseName,
description: ""
}
await fs.writeFile(DATABASES_FILE, JSON.stringify(databases, null, 2), "utf8");
};
const importConfigFiles = async ({ databaseName }) => {
const databaseConfigFolder = `src/config/databases/${databaseName}`;
await fs.mkdir(databaseConfigFolder);
const tableData = await readTableData(databaseName);
const tables = {};
const schemas = {};
tableData.forEach(row => {
schemas[row.table_schema] = true;
const name = row.table_schema === "public" ? row.table_name : `${row.table_schema}.${row.table_name}`;
if(tables[name]) {
tables[name].push([row.column_name, row.data_type]);
} else {
tables[name] = [[row.column_name, row.data_type]];
}
});
await importSchemaColors(databaseName, schemas);
await importTablePositions(databaseName, tables);
await importTableConfigs(databaseName, tables);
await importEdgeConfigs(databaseName, tables);
await importTablesIndexFile(databaseName, tables);
await addDatabaseEntry(databaseName);
};
(async () => {
const databaseName = process.argv[2];
if(!databaseName) {
console.log("--> Provide a database name like 'npm run import foobar'");
return;
}
const databaseConfigFolder = `src/config/databases/${databaseName}`;
try {
if(await fs.stat(databaseConfigFolder)) {
console.log(`⚠️ Folder ${databaseConfigFolder} already exists.`);
return;
}
} catch {}
const readline = require("readline").createInterface({
input: process.stdin,
output: process.stdout
});
readline.question("Do you want to import schema from a CSV file? y/n\n", async (answer) => {
if(answer.toLowerCase().includes("y")) {
await importConfigFiles({ databaseName });
console.log("Roger, everything is imported.");
} else {
console.log("Roger, skipping importing.");
}
readline.close();
});
})();
================================================
FILE: bin/reset
================================================
#!/usr/bin/env node
const fs = require("fs").promises;
const resetConfigFile = async (filePath, templatePath = `${filePath}.template`) => {
const templateData = await fs.readFile(templatePath, "utf8");
await fs.writeFile(filePath, templateData, "utf8");
};
const cleanUpDatabasesFolder = async () => {
await fs.rm("src/config/databases", { recursive: true });
await fs.mkdir("src/config/databases");
};
const readline = require("readline").createInterface({
input: process.stdin,
output: process.stdout
});
readline.question("Do you want to reset existing tables, edges and schema colors? y/n\n", async (answer) => {
if(answer.toLowerCase().includes("y")) {
await resetConfigFile("src/config/databases.json");
await cleanUpDatabasesFolder();
console.log("Roger, everything is reset.");
} else {
console.log("Roger, skipping resetting.");
}
readline.close();
});
================================================
FILE: build/asset-manifest.json
================================================
{
"files": {
"main.css": "/sql_schema_visualizer/static/css/main.9f228f45.css",
"main.js": "/sql_schema_visualizer/static/js/main.33dfc6b0.js",
"static/js/394.14a9b9da.chunk.js": "/sql_schema_visualizer/static/js/394.14a9b9da.chunk.js",
"static/js/226.0d90ab44.chunk.js": "/sql_schema_visualizer/static/js/226.0d90ab44.chunk.js",
"bindle-edges-json.js": "/sql_schema_visualizer/static/js/bindle-edges-json.94501736.chunk.js",
"ecommerce-edges-json.js": "/sql_schema_visualizer/static/js/ecommerce-edges-json.fe131063.chunk.js",
"finance-edges-json.js": "/sql_schema_visualizer/static/js/finance-edges-json.cc1c201e.chunk.js",
"live-edges-json.js": "/sql_schema_visualizer/static/js/live-edges-json.849f23e8.chunk.js",
"movies-edges-json.js": "/sql_schema_visualizer/static/js/movies-edges-json.5b3266f6.chunk.js",
"nba-edges-json.js": "/sql_schema_visualizer/static/js/nba-edges-json.b14b1c04.chunk.js",
"the-bank-job-edges-json.js": "/sql_schema_visualizer/static/js/the-bank-job-edges-json.f4126c62.chunk.js",
"bindle-tablePositions-json.js": "/sql_schema_visualizer/static/js/bindle-tablePositions-json.847db583.chunk.js",
"ecommerce-tablePositions-json.js": "/sql_schema_visualizer/static/js/ecommerce-tablePositions-json.03a16298.chunk.js",
"finance-tablePositions-json.js": "/sql_schema_visualizer/static/js/finance-tablePositions-json.9ab03387.chunk.js",
"live-tablePositions-json.js": "/sql_schema_visualizer/static/js/live-tablePositions-json.88001c8e.chunk.js",
"movies-tablePositions-json.js": "/sql_schema_visualizer/static/js/movies-tablePositions-json.1435348f.chunk.js",
"nba-tablePositions-json.js": "/sql_schema_visualizer/static/js/nba-tablePositions-json.eda5bb0d.chunk.js",
"the-bank-job-tablePositions-json.js": "/sql_schema_visualizer/static/js/the-bank-job-tablePositions-json.1ddd80ab.chunk.js",
"bindle-schemaColors-json.js": "/sql_schema_visualizer/static/js/bindle-schemaColors-json.b87e5760.chunk.js",
"ecommerce-schemaColors-json.js": "/sql_schema_visualizer/static/js/ecommerce-schemaColors-json.fdb98809.chunk.js",
"finance-schemaColors-json.js": "/sql_schema_visualizer/static/js/finance-schemaColors-json.e0d3a5af.chunk.js",
"live-schemaColors-json.js": "/sql_schema_visualizer/static/js/live-schemaColors-json.3efe2122.chunk.js",
"movies-schemaColors-json.js": "/sql_schema_visualizer/static/js/movies-schemaColors-json.a48d91cc.chunk.js",
"nba-schemaColors-json.js": "/sql_schema_visualizer/static/js/nba-schemaColors-json.e0912a1a.chunk.js",
"the-bank-job-schemaColors-json.js": "/sql_schema_visualizer/static/js/the-bank-job-schemaColors-json.00b0e9ee.chunk.js",
"bindle-tables.js": "/sql_schema_visualizer/static/js/bindle-tables.0d2bfe46.chunk.js",
"ecommerce-tables.js": "/sql_schema_visualizer/static/js/ecommerce-tables.f5264437.chunk.js",
"finance-tables.js": "/sql_schema_visualizer/static/js/finance-tables.eac6da84.chunk.js",
"live-tables.js": "/sql_schema_visualizer/static/js/live-tables.5a699030.chunk.js",
"movies-tables.js": "/sql_schema_visualizer/static/js/movies-tables.37f21107.chunk.js",
"nba-tables.js": "/sql_schema_visualizer/static/js/nba-tables.7858f3c9.chunk.js",
"the-bank-job-tables.js": "/sql_schema_visualizer/static/js/the-bank-job-tables.b72c42c8.chunk.js",
"index.html": "/sql_schema_visualizer/index.html",
"main.9f228f45.css.map": "/sql_schema_visualizer/static/css/main.9f228f45.css.map",
"main.33dfc6b0.js.map": "/sql_schema_visualizer/static/js/main.33dfc6b0.js.map",
"394.14a9b9da.chunk.js.map": "/sql_schema_visualizer/static/js/394.14a9b9da.chunk.js.map",
"226.0d90ab44.chunk.js.map": "/sql_schema_visualizer/static/js/226.0d90ab44.chunk.js.map",
"bindle-tables.0d2bfe46.chunk.js.map": "/sql_schema_visualizer/static/js/bindle-tables.0d2bfe46.chunk.js.map",
"ecommerce-tables.f5264437.chunk.js.map": "/sql_schema_visualizer/static/js/ecommerce-tables.f5264437.chunk.js.map",
"finance-tables.eac6da84.chunk.js.map": "/sql_schema_visualizer/static/js/finance-tables.eac6da84.chunk.js.map",
"live-tables.5a699030.chunk.js.map": "/sql_schema_visualizer/static/js/live-tables.5a699030.chunk.js.map",
"movies-tables.37f21107.chunk.js.map": "/sql_schema_visualizer/static/js/movies-tables.37f21107.chunk.js.map",
"nba-tables.7858f3c9.chunk.js.map": "/sql_schema_visualizer/static/js/nba-tables.7858f3c9.chunk.js.map",
"the-bank-job-tables.b72c42c8.chunk.js.map": "/sql_schema_visualizer/static/js/the-bank-job-tables.b72c42c8.chunk.js.map"
},
"entrypoints": [
"static/css/main.9f228f45.css",
"static/js/main.33dfc6b0.js"
]
}
================================================
FILE: build/databases/bindle.html
================================================
================================================
FILE: build/databases/ecommerce.html
================================================
================================================
FILE: build/databases/finance.html
================================================
================================================
FILE: build/databases/live.html
================================================
================================================
FILE: build/databases/movies.html
================================================
================================================
FILE: build/databases/nba.html
================================================
================================================
FILE: build/databases/the-bank-job.html
================================================
================================================
FILE: build/index.html
================================================
================================================
FILE: build/static/css/main.9f228f45.css
================================================
@import url(https://fonts.googleapis.com/css?family=Muli:400,400i,500,600,700,800&display=swap);.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.bottom,.react-flow__resize-control.top{cursor:ns-resize}.react-flow__resize-control.bottom.right,.react-flow__resize-control.top.left{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{background-color:#3367d9;border:1px solid #fff;border-radius:1px;height:4px;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:4px}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.bottom.left,.react-flow__resize-control.handle.top.left{left:0}.react-flow__resize-control.handle.bottom.right,.react-flow__resize-control.handle.top.right{left:100%}.react-flow__resize-control.line{border:0 solid #3367d9}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{height:100%;top:0;-webkit-transform:translate(-50%);transform:translate(-50%);width:1px}.react-flow__resize-control.line.left{border-left-width:1px;left:0}.react-flow__resize-control.line.right{border-right-width:1px;left:100%}.react-flow__resize-control.line.bottom,.react-flow__resize-control.line.top{height:1px;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:100%}.react-flow__resize-control.line.top{border-top-width:1px;top:0}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.react-flow__container{height:100%;left:0;position:absolute;top:0;width:100%}.react-flow__pane{cursor:grab;z-index:1}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:grabbing}.react-flow__viewport{pointer-events:none;-webkit-transform-origin:0 0;transform-origin:0 0;z-index:2}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{overflow:visible;pointer-events:none}.react-flow__connection-path,.react-flow__edge-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{cursor:pointer;pointer-events:visibleStroke}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection.animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none}.react-flow__node,.react-flow__nodes{-webkit-transform-origin:0 0;transform-origin:0 0}.react-flow__node{box-sizing:border-box;cursor:grab;pointer-events:all;position:absolute;-webkit-user-select:none;user-select:none}.react-flow__node.dragging{cursor:grabbing}.react-flow__nodesselection{pointer-events:none;-webkit-transform-origin:left top;transform-origin:left top;z-index:3}.react-flow__nodesselection-rect{cursor:grab;pointer-events:all;position:absolute}.react-flow__handle{background:#1a192b;border:1px solid #fff;border-radius:100%;height:6px;min-height:5px;min-width:5px;pointer-events:none;position:absolute;width:6px}.react-flow__handle.connectable{cursor:crosshair;pointer-events:all}.react-flow__handle-bottom{bottom:-4px;top:auto}.react-flow__handle-bottom,.react-flow__handle-top{left:50%;-webkit-transform:translate(-50%);transform:translate(-50%)}.react-flow__handle-top{top:-4px}.react-flow__handle-left{left:-4px}.react-flow__handle-left,.react-flow__handle-right{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.react-flow__handle-right{right:-4px}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{margin:15px;position:absolute;z-index:5}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.react-flow__attribution{background:hsla(0,0%,100%,.5);font-size:10px;margin:0;padding:2px 3px}.react-flow__attribution a{color:#999;text-decoration:none}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{height:100%;pointer-events:none;position:absolute;width:100%}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-group,.react-flow__node-input,.react-flow__node-output{background-color:#fff;border:1px solid #1a192b;border-radius:3px;color:#222;font-size:12px;padding:10px;text-align:center;width:150px}.react-flow__node-default.selectable:hover,.react-flow__node-group.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover{box-shadow:0 1px 4px 1px rgba(0,0,0,.08)}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:hsla(0,0%,94%,.25)}.react-flow__nodesselection-rect,.react-flow__selection{background:rgba(0,89,220,.08);border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px rgba(0,0,0,.08)}.react-flow__controls-button{align-items:center;background:#fefefe;border:none;border-bottom:1px solid #eee;box-sizing:initial;cursor:pointer;display:flex;height:16px;justify-content:center;padding:5px;-webkit-user-select:none;user-select:none;width:16px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{max-height:12px;max-width:12px;width:100%}.react-flow__minimap{background-color:#fff}.Flow{flex-grow:1;font-size:12px;height:100%;width:100%}:not(:root):-webkit-full-screen::backdrop{background-color:#fff}:not(:root):fullscreen::-webkit-backdrop{background-color:#fff}:not(:root):fullscreen::backdrop{background-color:#fff}.react-flow__node-custom{border:1px solid #555;border-radius:5px;padding:10px;width:300px}.react-flow__edge.selected .react-flow__edge-path{stroke:#2186eb!important}.react-flow__node{background-color:#f5f7fa;max-width:288px}.react-flow__attribution a{background:none}.react-flow__handle-left,.react-flow__handle-right{background:transparent!important;border:0!important}.table{background-color:#fff}.table__name{border:0;border-radius:4px 4px 0 0;font-weight:700;padding:8px;position:relative;text-align:center}.table__columns{border:1px solid #cbd2d9;border-radius:0 0 4px 4px;border-top:0}.table__description{background-color:#fff;border:1px solid #cbd2d9;border-radius:4px;display:none;font-weight:400;padding:8px;position:absolute;right:-6px;text-align:left;top:50%;-webkit-transform:translateX(100%) translateY(-50%);transform:translateX(100%) translateY(-50%);width:150px;z-index:1000}.table__description:after{border:3px solid transparent;border-right-color:#fff;content:"";position:absolute;right:100%;top:50%;-webkit-transform:translateX(0) translateY(-50%);transform:translateX(0) translateY(-50%)}.table__description:before{border:4px solid transparent;border-right-color:#cbd2d9;content:"";position:absolute;right:100%;top:50%;-webkit-transform:translateX(-.5px) translateY(-50%);transform:translateX(-.5px) translateY(-50%)}.table__description--active{display:block}.table--highlighted .table__name{background-color:#fadb5f}.table--highlighted .table__columns{border:2px dashed #fadb5f;border-top:0}.table:hover .table__name{opacity:1}.table--dimmed .table__name{opacity:.4}.column-name{border-bottom:0;cursor:pointer;font-size:12px;line-height:1;position:relative;z-index:50}.column-name__name{margin-right:16px}.column-name__type{color:#bbb}.column-name__description{background-color:#fff;border:1px solid #cbd2d9;border-radius:4px;display:none;line-height:1.2;padding:8px;position:absolute;right:-6px;top:50%;-webkit-transform:translateX(100%) translateY(-50%);transform:translateX(100%) translateY(-50%);width:150px;z-index:1000}.column-name__description:before{border:4px solid transparent;border-right-color:#cbd2d9;content:"";position:absolute;right:100%;top:50%;-webkit-transform:translateX(-.5px) translateY(-50%);transform:translateX(-.5px) translateY(-50%)}.column-name__description:after{border:3px solid transparent;border-right-color:#fff;content:"";position:absolute;right:100%;top:50%;-webkit-transform:translateX(0) translateY(-50%);transform:translateX(0) translateY(-50%)}.column-name__inner{display:flex;justify-content:space-between;padding:8px;position:relative}.column-name:last-child{border-bottom:0!important;border-radius:0 0 4px 4px}.column-name:hover{background-color:#efefef;opacity:1}.column-name--highlighted{background-color:#fff3c4;border-color:#fff3c4}.column-name--dimmed{opacity:.4}.column-name--selected .column-name__description{display:block;opacity:1}.info-popup{align-items:center;background-color:rgba(0,0,0,.7);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:100000}.info-popup__inner{background-color:#fff;border-radius:8px;font-size:16px;left:50%;line-height:1.4;max-height:100%;overflow-y:auto;padding:16px 16px 8px;position:fixed;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:100%;z-index:200000}@media(min-width:512px){.info-popup__inner{max-width:576px}}.info-popup__headline{margin-top:0}.info-popup__database-name{margin-bottom:8px}.info-popup__database-name+p{margin-top:0}.info-popup__close-icon{cursor:pointer;position:absolute;right:12px;top:12px}.info-popup__close-icon:hover{opacity:.7}.has-one-edge.selected path.react-flow__edge-path{marker-end:url(#hasOneSelected);stroke-width:1.5px}.has-one-edge--highlighted path.react-flow__connection-path,.has-one-edge--highlighted path.react-flow__edge-interaction,.has-one-edge--highlighted path.react-flow__edge-path{stroke:#2186eb!important;stroke-width:1.5px}.has-one-edge-reversed.selected path.react-flow__edge-path{marker-end:url(#hasOneReversedSelected);stroke-width:1.5px}.has-one-edge-reversed--highlighted path.react-flow__connection-path,.has-one-edge-reversed--highlighted path.react-flow__edge-interaction,.has-one-edge-reversed--highlighted path.react-flow__edge-path{stroke:#2186eb!important;stroke-width:1.5px}.has-many-edge.selected path.react-flow__edge-path{marker-end:url(#hasManySelected);stroke-width:1.5}.has-many-edge--highlighted path.react-flow__connection-path,.has-many-edge--highlighted path.react-flow__edge-interaction,.has-many-edge--highlighted path.react-flow__edge-path{stroke:#2186eb!important;stroke-width:1.5px}.has-many-edge-reversed.selected path.react-flow__edge-path{marker-end:url(#hasManyReversedSelected);stroke-width:1.5}.has-many-edge-reversed--highlighted path.react-flow__connection-path,.has-many-edge-reversed--highlighted path.react-flow__edge-interaction,.has-many-edge-reversed--highlighted path.react-flow__edge-path{stroke:#2186eb!important;stroke-width:1.5px}.key-icon{height:12px;margin-right:4px;width:12px}.left-handle{left:0;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.left-handle,.right-handle{height:2px;min-width:2px;top:50%;width:2px}.right-handle{right:0;-webkit-transform:translateX(50%) translateY(-50%);transform:translateX(50%) translateY(-50%)}.App{display:flex;flex-direction:column;height:100%}.App-header{align-items:center;border-bottom:1px solid #eee;display:flex;height:40px;padding:0 1rem}.App__logo{background:none;cursor:pointer;left:16px;position:fixed;text-decoration:none;top:16px;z-index:50000}.layout{position:fixed}.layout,.layout__outlet{height:100%;width:100%}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{color:#1f2933;font-display:swap;font-family:Muli,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}#root,body,html{height:100%}h1,h2,h3,h4{margin-bottom:0;margin-top:1em}a{background:linear-gradient(90deg,#1f2933,#1f2933),linear-gradient(90deg,red,#ff00b4,#2186eb);background-position:100% 100%,0 100%;background-repeat:no-repeat;background-size:100% 1px,0 1px;color:inherit;text-decoration:none;transition:background-size .4s}a:hover{background-size:0 1px,100% 1px}.emoji{height:1.1em;margin:0 .05em 0 .1em;vertical-align:-.1em;width:1.1em}.mb-32{margin-bottom:32px}
/*# sourceMappingURL=main.9f228f45.css.map*/
================================================
FILE: build/static/js/226.0d90ab44.chunk.js
================================================
/*! For license information please see 226.0d90ab44.chunk.js.LICENSE.txt */
"use strict";(self.webpackChunksql_schema_visualizer=self.webpackChunksql_schema_visualizer||[]).push([[226],{3226:function(d,u,f){f.r(u);var c=function(){var d={base:"https://twemoji.maxcdn.com/v/14.0.2/",ext:".png",size:"72x72",className:"emoji",convert:{fromCodePoint:function(d){var u="string"===typeof d?parseInt(d,16):d;if(u<65536)return t(u);return t(55296+((u-=65536)>>10),56320+(1023&u))},toCodePoint:g},onerror:function(){this.parentNode&&this.parentNode.replaceChild(r(this.alt,!1),this)},parse:function(u,f){f&&"function"!==typeof f||(f={callback:f});return("string"===typeof u?l:i)(u,{callback:f.callback||n,attributes:"function"===typeof f.attributes?f.attributes:h,base:"string"===typeof f.base?f.base:d.base,ext:f.ext||d.ext,size:f.folder||(c=f.size||d.size,"number"===typeof c?c+"x"+c:c),className:f.className||d.className,onerror:f.onerror||d.onerror});var c},replace:m,test:function(d){f.lastIndex=0;var u=f.test(d);return f.lastIndex=0,u}},u={"&":"&","<":"<",">":">","'":"'",'"':"""},f=/(?:\ud83d\udc68\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83e\uddd1\ud83c[\udffc-\udfff]|\ud83e\uddd1\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83e\uddd1\ud83c[\udffb\udffd-\udfff]|\ud83e\uddd1\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83e\uddd1\ud83c[\udffb\udffc\udffe\udfff]|\ud83e\uddd1\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83e\uddd1\ud83c[\udffb-\udffd\udfff]|\ud83e\uddd1\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83e\uddd1\ud83c[\udffb-\udffe]|\ud83d\udc68\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udffb\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffc-\udfff]|\ud83d\udc68\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udffc\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb\udffd-\udfff]|\ud83d\udc68\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udffd\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb\udffc\udffe\udfff]|\ud83d\udc68\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udffe\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb-\udffd\udfff]|\ud83d\udc68\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udfff\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb-\udffe]|\ud83d\udc69\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffb\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffc-\udfff]|\ud83d\udc69\ud83c\udffb\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffc-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb\udffd-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffb\udffd-\udfff]|\ud83d\udc69\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffd\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb\udffc\udffe\udfff]|\ud83d\udc69\ud83c\udffd\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffb\udffc\udffe\udfff]|\ud83d\udc69\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffe\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb-\udffd\udfff]|\ud83d\udc69\ud83c\udffe\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffb-\udffd\udfff]|\ud83d\udc69\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udfff\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb-\udffe]|\ud83d\udc69\ud83c\udfff\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffb-\udffe]|\ud83e\uddd1\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83e\uddd1\ud83c[\udffc-\udfff]|\ud83e\uddd1\ud83c\udffb\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83e\uddd1\ud83c[\udffb\udffd-\udfff]|\ud83e\uddd1\ud83c\udffc\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83e\uddd1\ud83c[\udffb\udffc\udffe\udfff]|\ud83e\uddd1\ud83c\udffd\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83e\uddd1\ud83c[\udffb-\udffd\udfff]|\ud83e\uddd1\ud83c\udffe\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83e\uddd1\ud83c[\udffb-\udffe]|\ud83e\uddd1\ud83c\udfff\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83d\udc68\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68|\ud83d\udc69\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d[\udc68\udc69]|\ud83e\udef1\ud83c\udffb\u200d\ud83e\udef2\ud83c[\udffc-\udfff]|\ud83e\udef1\ud83c\udffc\u200d\ud83e\udef2\ud83c[\udffb\udffd-\udfff]|\ud83e\udef1\ud83c\udffd\u200d\ud83e\udef2\ud83c[\udffb\udffc\udffe\udfff]|\ud83e\udef1\ud83c\udffe\u200d\ud83e\udef2\ud83c[\udffb-\udffd\udfff]|\ud83e\udef1\ud83c\udfff\u200d\ud83e\udef2\ud83c[\udffb-\udffe]|\ud83d\udc68\u200d\u2764\ufe0f\u200d\ud83d\udc68|\ud83d\udc69\u200d\u2764\ufe0f\u200d\ud83d[\udc68\udc69]|\ud83e\uddd1\u200d\ud83e\udd1d\u200d\ud83e\uddd1|\ud83d\udc6b\ud83c[\udffb-\udfff]|\ud83d\udc6c\ud83c[\udffb-\udfff]|\ud83d\udc6d\ud83c[\udffb-\udfff]|\ud83d\udc8f\ud83c[\udffb-\udfff]|\ud83d\udc91\ud83c[\udffb-\udfff]|\ud83e\udd1d\ud83c[\udffb-\udfff]|\ud83d[\udc6b-\udc6d\udc8f\udc91]|\ud83e\udd1d)|(?:\ud83d[\udc68\udc69]|\ud83e\uddd1)(?:\ud83c[\udffb-\udfff])?\u200d(?:\u2695\ufe0f|\u2696\ufe0f|\u2708\ufe0f|\ud83c[\udf3e\udf73\udf7c\udf84\udf93\udfa4\udfa8\udfeb\udfed]|\ud83d[\udcbb\udcbc\udd27\udd2c\ude80\ude92]|\ud83e[\uddaf-\uddb3\uddbc\uddbd])|(?:\ud83c[\udfcb\udfcc]|\ud83d[\udd74\udd75]|\u26f9)((?:\ud83c[\udffb-\udfff]|\ufe0f)\u200d[\u2640\u2642]\ufe0f)|(?:\ud83c[\udfc3\udfc4\udfca]|\ud83d[\udc6e\udc70\udc71\udc73\udc77\udc81\udc82\udc86\udc87\ude45-\ude47\ude4b\ude4d\ude4e\udea3\udeb4-\udeb6]|\ud83e[\udd26\udd35\udd37-\udd39\udd3d\udd3e\uddb8\uddb9\uddcd-\uddcf\uddd4\uddd6-\udddd])(?:\ud83c[\udffb-\udfff])?\u200d[\u2640\u2642]\ufe0f|(?:\ud83d\udc68\u200d\ud83d\udc68\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc68\u200d\ud83d\udc68\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\ud83d\udc69\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc69\u200d\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc68\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\ud83d\udc68\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\ud83d\udc69\u200d\ud83d[\udc66\udc67]|\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f|\ud83c\udff3\ufe0f\u200d\ud83c\udf08|\ud83d\ude36\u200d\ud83c\udf2b\ufe0f|\u2764\ufe0f\u200d\ud83d\udd25|\u2764\ufe0f\u200d\ud83e\ude79|\ud83c\udff4\u200d\u2620\ufe0f|\ud83d\udc15\u200d\ud83e\uddba|\ud83d\udc3b\u200d\u2744\ufe0f|\ud83d\udc41\u200d\ud83d\udde8|\ud83d\udc68\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\ud83d[\udc66\udc67]|\ud83d\udc6f\u200d\u2640\ufe0f|\ud83d\udc6f\u200d\u2642\ufe0f|\ud83d\ude2e\u200d\ud83d\udca8|\ud83d\ude35\u200d\ud83d\udcab|\ud83e\udd3c\u200d\u2640\ufe0f|\ud83e\udd3c\u200d\u2642\ufe0f|\ud83e\uddde\u200d\u2640\ufe0f|\ud83e\uddde\u200d\u2642\ufe0f|\ud83e\udddf\u200d\u2640\ufe0f|\ud83e\udddf\u200d\u2642\ufe0f|\ud83d\udc08\u200d\u2b1b)|[#*0-9]\ufe0f?\u20e3|(?:[\xa9\xae\u2122\u265f]\ufe0f)|(?:\ud83c[\udc04\udd70\udd71\udd7e\udd7f\ude02\ude1a\ude2f\ude37\udf21\udf24-\udf2c\udf36\udf7d\udf96\udf97\udf99-\udf9b\udf9e\udf9f\udfcd\udfce\udfd4-\udfdf\udff3\udff5\udff7]|\ud83d[\udc3f\udc41\udcfd\udd49\udd4a\udd6f\udd70\udd73\udd76-\udd79\udd87\udd8a-\udd8d\udda5\udda8\uddb1\uddb2\uddbc\uddc2-\uddc4\uddd1-\uddd3\udddc-\uddde\udde1\udde3\udde8\uddef\uddf3\uddfa\udecb\udecd-\udecf\udee0-\udee5\udee9\udef0\udef3]|[\u203c\u2049\u2139\u2194-\u2199\u21a9\u21aa\u231a\u231b\u2328\u23cf\u23ed-\u23ef\u23f1\u23f2\u23f8-\u23fa\u24c2\u25aa\u25ab\u25b6\u25c0\u25fb-\u25fe\u2600-\u2604\u260e\u2611\u2614\u2615\u2618\u2620\u2622\u2623\u2626\u262a\u262e\u262f\u2638-\u263a\u2640\u2642\u2648-\u2653\u2660\u2663\u2665\u2666\u2668\u267b\u267f\u2692-\u2697\u2699\u269b\u269c\u26a0\u26a1\u26a7\u26aa\u26ab\u26b0\u26b1\u26bd\u26be\u26c4\u26c5\u26c8\u26cf\u26d1\u26d3\u26d4\u26e9\u26ea\u26f0-\u26f5\u26f8\u26fa\u26fd\u2702\u2708\u2709\u270f\u2712\u2714\u2716\u271d\u2721\u2733\u2734\u2744\u2747\u2757\u2763\u2764\u27a1\u2934\u2935\u2b05-\u2b07\u2b1b\u2b1c\u2b50\u2b55\u3030\u303d\u3297\u3299])(?:\ufe0f|(?!\ufe0e))|(?:(?:\ud83c[\udfcb\udfcc]|\ud83d[\udd74\udd75\udd90]|[\u261d\u26f7\u26f9\u270c\u270d])(?:\ufe0f|(?!\ufe0e))|(?:\ud83c[\udf85\udfc2-\udfc4\udfc7\udfca]|\ud83d[\udc42\udc43\udc46-\udc50\udc66-\udc69\udc6e\udc70-\udc78\udc7c\udc81-\udc83\udc85-\udc87\udcaa\udd7a\udd95\udd96\ude45-\ude47\ude4b-\ude4f\udea3\udeb4-\udeb6\udec0\udecc]|\ud83e[\udd0c\udd0f\udd18-\udd1c\udd1e\udd1f\udd26\udd30-\udd39\udd3d\udd3e\udd77\uddb5\uddb6\uddb8\uddb9\uddbb\uddcd-\uddcf\uddd1-\udddd\udec3-\udec5\udef0-\udef6]|[\u270a\u270b]))(?:\ud83c[\udffb-\udfff])?|(?:\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f|\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc73\udb40\udc63\udb40\udc74\udb40\udc7f|\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc77\udb40\udc6c\udb40\udc73\udb40\udc7f|\ud83c\udde6\ud83c[\udde8-\uddec\uddee\uddf1\uddf2\uddf4\uddf6-\uddfa\uddfc\uddfd\uddff]|\ud83c\udde7\ud83c[\udde6\udde7\udde9-\uddef\uddf1-\uddf4\uddf6-\uddf9\uddfb\uddfc\uddfe\uddff]|\ud83c\udde8\ud83c[\udde6\udde8\udde9\uddeb-\uddee\uddf0-\uddf5\uddf7\uddfa-\uddff]|\ud83c\udde9\ud83c[\uddea\uddec\uddef\uddf0\uddf2\uddf4\uddff]|\ud83c\uddea\ud83c[\udde6\udde8\uddea\uddec\udded\uddf7-\uddfa]|\ud83c\uddeb\ud83c[\uddee-\uddf0\uddf2\uddf4\uddf7]|\ud83c\uddec\ud83c[\udde6\udde7\udde9-\uddee\uddf1-\uddf3\uddf5-\uddfa\uddfc\uddfe]|\ud83c\udded\ud83c[\uddf0\uddf2\uddf3\uddf7\uddf9\uddfa]|\ud83c\uddee\ud83c[\udde8-\uddea\uddf1-\uddf4\uddf6-\uddf9]|\ud83c\uddef\ud83c[\uddea\uddf2\uddf4\uddf5]|\ud83c\uddf0\ud83c[\uddea\uddec-\uddee\uddf2\uddf3\uddf5\uddf7\uddfc\uddfe\uddff]|\ud83c\uddf1\ud83c[\udde6-\udde8\uddee\uddf0\uddf7-\uddfb\uddfe]|\ud83c\uddf2\ud83c[\udde6\udde8-\udded\uddf0-\uddff]|\ud83c\uddf3\ud83c[\udde6\udde8\uddea-\uddec\uddee\uddf1\uddf4\uddf5\uddf7\uddfa\uddff]|\ud83c\uddf4\ud83c\uddf2|\ud83c\uddf5\ud83c[\udde6\uddea-\udded\uddf0-\uddf3\uddf7-\uddf9\uddfc\uddfe]|\ud83c\uddf6\ud83c\udde6|\ud83c\uddf7\ud83c[\uddea\uddf4\uddf8\uddfa\uddfc]|\ud83c\uddf8\ud83c[\udde6-\uddea\uddec-\uddf4\uddf7-\uddf9\uddfb\uddfd-\uddff]|\ud83c\uddf9\ud83c[\udde6\udde8\udde9\uddeb-\udded\uddef-\uddf4\uddf7\uddf9\uddfb\uddfc\uddff]|\ud83c\uddfa\ud83c[\udde6\uddec\uddf2\uddf3\uddf8\uddfe\uddff]|\ud83c\uddfb\ud83c[\udde6\udde8\uddea\uddec\uddee\uddf3\uddfa]|\ud83c\uddfc\ud83c[\uddeb\uddf8]|\ud83c\uddfd\ud83c\uddf0|\ud83c\uddfe\ud83c[\uddea\uddf9]|\ud83c\uddff\ud83c[\udde6\uddf2\uddfc]|\ud83c[\udccf\udd8e\udd91-\udd9a\udde6-\uddff\ude01\ude32-\ude36\ude38-\ude3a\ude50\ude51\udf00-\udf20\udf2d-\udf35\udf37-\udf7c\udf7e-\udf84\udf86-\udf93\udfa0-\udfc1\udfc5\udfc6\udfc8\udfc9\udfcf-\udfd3\udfe0-\udff0\udff4\udff8-\udfff]|\ud83d[\udc00-\udc3e\udc40\udc44\udc45\udc51-\udc65\udc6a\udc6f\udc79-\udc7b\udc7d-\udc80\udc84\udc88-\udc8e\udc90\udc92-\udca9\udcab-\udcfc\udcff-\udd3d\udd4b-\udd4e\udd50-\udd67\udda4\uddfb-\ude44\ude48-\ude4a\ude80-\udea2\udea4-\udeb3\udeb7-\udebf\udec1-\udec5\uded0-\uded2\uded5-\uded7\udedd-\udedf\udeeb\udeec\udef4-\udefc\udfe0-\udfeb\udff0]|\ud83e[\udd0d\udd0e\udd10-\udd17\udd20-\udd25\udd27-\udd2f\udd3a\udd3c\udd3f-\udd45\udd47-\udd76\udd78-\uddb4\uddb7\uddba\uddbc-\uddcc\uddd0\uddde-\uddff\ude70-\ude74\ude78-\ude7c\ude80-\ude86\ude90-\udeac\udeb0-\udeba\udec0-\udec2\uded0-\uded9\udee0-\udee7]|[\u23e9-\u23ec\u23f0\u23f3\u267e\u26ce\u2705\u2728\u274c\u274e\u2753-\u2755\u2795-\u2797\u27b0\u27bf\ue50a])|\ufe0f/g,c=/\uFE0F/g,e=String.fromCharCode(8205),b=/[&<>'"]/g,a=/^(?:iframe|noframes|noscript|script|select|style|textarea)$/,t=String.fromCharCode;return d;function r(d,u){return document.createTextNode(u?d.replace(c,""):d)}function n(d,u){return"".concat(u.base,u.size,"/",d,u.ext)}function o(d,u){for(var f,c,e=d.childNodes,b=e.length;b--;)3===(c=(f=e[b]).nodeType)?u.push(f):1!==c||"ownerSVGElement"in f||a.test(f.nodeName.toLowerCase())||o(f,u);return u}function s(d){return g(d.indexOf(e)<0?d.replace(c,""):d)}function i(d,u){for(var c,e,b,a,t,n,i,l,p,h,m,g,x,C=o(d,[]),v=C.length;v--;){for(b=!1,a=document.createDocumentFragment(),n=(t=C[v]).nodeValue,l=0;i=f.exec(n);){if((p=i.index)!==l&&a.appendChild(r(n.slice(l,p),!0)),g=s(m=i[0]),l=p+m.length,x=u.callback(g,u),g&&x){for(e in(h=new Image).onerror=u.onerror,h.setAttribute("draggable","false"),c=u.attributes(m,g))c.hasOwnProperty(e)&&0!==e.indexOf("on")&&!h.hasAttribute(e)&&h.setAttribute(e,c[e]);h.className=u.className,h.alt=m,h.src=x,b=!0,a.appendChild(h)}h||a.appendChild(r(m,!1)),h=null}b&&(l"+i(e[t].content)+"\n"},a.fence=function(e,t,n,r,a){var l,s,u,c,d,f=e[t],h=f.info?o(f.info).trim():"",p="",m="";return h&&(p=(u=h.split(/(\s+)/g))[0],m=u.slice(2).join("")),0===(l=n.highlight&&n.highlight(f.content,p,m)||i(f.content)).indexOf("