Caution
This is a collection of unofficial prototypes for demonstration purposes only. All data is fictional. Not all features are fully functional. This project serves as a visual and conceptual prototype - it is not intended for production use.
A set of experimental web prototypes exploring different ways to browse, search, and document the data assets of a large organisation - here, the Swiss Federal Office for Buildings and Logistics (BBL).
Each prototype tackles the same underlying question - "how should people inside my organisation find out what data exists, what it means, and where it lives?" - but from a different angle: a polished DCAT-AP catalog, an architecture-layer browser, a SQL-backed explorer, a lineage graph, a diagram editor, and a Miro-style architecture canvas.
All here presented applications are unofficial mockups. They are not production systems - they're meant to compare ideas and spark discussion. Where relevant, metadata follows the Swiss DCAT-AP CH v3.0 standard (the Swiss profile of the EU catalog vocabulary), or best practice frameworks like TOGAG, or DAMA-DMBOK.
You don't need to install anything - every prototype is deployed on GitHub Pages.
Main catalog. Browse business objects and datasets with search, filters, grid/list views, and detail pages. Follows the DCAT-AP CH v3.0 standard. Multilingual: DE / EN / FR / IT.
Data catalog backed by a SQLite file that runs entirely in the browser via sql.js. Sidebar navigation, full-text search, detail views for every entity, and interactive lineage graphs.
Hierarchical metadata browser following a three-layer architecture model (Conceptual → Logical → Physical), with wiki-style documentation and cross-layer traceability. Multilingual (DE / EN / FR / IT), dark and light theme.
Interactive graph for exploring data lineage across systems. Live JSON editor on the left, viewer with pan / zoom / fit / expand on the right. Six layout presets, column-level mappings, system-based grouping - vanilla JS, no framework.
Single-page editor for ER diagrams and flowcharts that accepts free-text names (spaces, umlauts, special characters). Built on Mermaid.js.
Miro-style canvas for sketching data architecture. Drag-and-drop entity palette, draggable nodes with collapsible property sets (groups of attributes), inline-editable column rows with PK/FK/UK key cycling, drag-handle reorder, system-grouping frames, and a draft-mode editor with explicit Save / Cancel. Click a node or table row to open a right-side info panel showing metadata, sets, attribute counts, and relations. Three views over the same state - Diagram, Tabelle (entity-typed tabs), and a mock Catalog Management API. Excel round-trip across four sheets. Hash-based URLs for shareable links.
All prototypes are plain HTML/CSS/JS with zero build step and zero npm dependencies. Any static file server will do:
git clone https://github.com/bbl-dres/data-catalog.git
cd data-catalog
# then either:
python3 -m http.server 8000
# or:
npx http-serverOpen http://localhost:8000 - the root page redirects to the main catalog. Append /prototype-layers/, /prototype-sqlite/, /prototype-lineage/, /prototype-mermaid/, or /prototype-canvas/ for the others.
data-catalog/
├── index.html # Redirect to prototype-main/
├── prototype-main/ # Business Object & Dataset Catalog (Datenkatalog IMMO)
├── prototype-layers/ # Architecture Layer Browser (Meta-Atlas)
├── prototype-sqlite/ # SQLite Catalog Explorer
├── prototype-lineage/ # Data Lineage Viewer
├── prototype-mermaid/ # Mermaid Diagram Editor (Simple Chart)
├── prototype-canvas/ # Architecture Canvas (Miro-style, BBL chrome)
├── prototype-ea-immo/ # EA-IMMO conceptual data model for real estate
├── assets/ # Shared repo assets (social preview)
└── docs/ # Repo-level docs (market research, etc.)
Licensed under the MIT License.
Unofficial mockup - not affiliated with or endorsed by BBL.