Screen Role: Database DevOps studio converting raw SQL DDL `CREATE TABLE` scripts into interactive Mermaid.js entity-relationship diagrams (ERD).
Design Intent: A developer-grade database schema migration and diagram studio UI at 1440x900 resolution in bright Light Mode. White background (#FFFFFF). Split-screen workstation layout:
- Left Panel (50%): Syntax-highlighted SQL editor containing PostgreSQL DDL statements (`CREATE TABLE users...`, `CREATE TABLE orders...`, foreign keys, indexes).
- Right Panel (50%): Interactive vector Mermaid.js Entity-Relationship Diagram (ERD) canvas: clean rectangular table entities connected by cardinality lines (crow's foot notation) showing relationships between Users, Subscriptions, Invoices, and AuditLogs.
Top control bar: Format selector dropdown "[ PostgreSQL / MySQL / SQLite DDL v ]", toggle "Show Column Types", and export buttons: Primary indigo "Export Vector SVG Diagram", secondary "Copy Mermaid Code", and "Export DBML". Developer aesthetic, JetBrains Mono font, zero emojis.
Component Architecture: Django Cotton components (<c-file_converter.* />) with Tailwind tokens matching Labb.io design language.
Direct route: /file-converter/studio/ddl-erd/
Template: file_converter/screens/screen_40.html