Design and draw one-wire electrical diagrams for Belgian AREI legislation — entirely in the browser
Try the application online: https://eendraadschema.xeweb.be
Eendraadschema is a browser-based tool for designing one-wire electrical diagrams as required by the Belgian AREI legislation. No installation, no server — open the app and start drawing.
- Modern React 19 component architecture
- Ribbon-based interface with compact button layouts
- Dark mode support
- Responsive design with flexbox layouts
- Full React implementation of the electrical schema editor
- All original electrical schema functionality preserved
- Improved rendering performance
- Interactive SVG diagrams
- Searchable SVG symbol library
- Filter symbols by category
- Drag-and-drop placement of electrical symbols
- Element selection and positioning tools
- Multi-page management
- Zoom controls (25%, 50%, 75%, 100%, 150%, 200%)
- Auto-save every 5 seconds
- IndexedDB-based local storage
- Recovery dialog for unsaved changes
- Visual save status indicator
- Import/export
.edsand.jsonfiles - PDF export functionality
- Integrated documentation viewer
- PDF manuals included
The editor exposes its current eendraadschema document as WebMCP tools. This lets Codex or ChatGPT inspect and edit a schema through a supported browser session, without sending the document to an application server.
The available tools are:
| Tool | Purpose |
|---|---|
schema.get |
List active schema elements with ids, types, parents and labels |
schema.get_element |
Read one element and all of its editable properties |
schema.add_element |
Add a supported element at the root or under a parent |
schema.update_element |
Change primitive properties on an existing element |
schema.delete_element |
Delete an element and its children after explicit confirmation |
In Codex or ChatGPT, open the app in the same WebMCP-enabled browser session and ask for a concrete operation, for example:
Find the element named
Keuken, show its id and properties, then change its address toKeuken gelijkvloers.
The assistant should read the schema first, use the returned numeric id for an
edit, and describe consequential changes before applying them. Deletion always
requires confirm: true; an omitted or false confirmation is rejected by the
editor.
WebMCP is an experimental browser feature. Use a recent Chromium build with
the WebMCP testing flag enabled (chrome://flags/#enable-webmcp-testing) and
serve the app from a secure context (https:// or local development). Browsers
without WebMCP continue to work normally; the tools simply are not registered.
- Node.js 20 or higher
- npm or yarn
# Clone the repository
git clone https://github.com/TimVanOnckelen/eendraadschema.git
cd eendraadschema
# Install dependencies
npm install
# Start development server
npm run devThe application opens at http://localhost:5173.
npm run buildOutput is placed in the dist/ folder.
Google Drive integration uses Google Identity Services with the narrow
drive.file OAuth scope. Browser code needs a public OAuth client ID, never a
client secret.
- Create or select a project in Google Cloud Console.
- Enable Google Drive API.
- Configure the OAuth consent screen.
- Create an OAuth 2.0 Client ID of type Web application.
- Add authorized JavaScript origins, for example:
http://localhost:5173https://drskunk.github.io
- Copy
.env.exampleto.env.localand set:
VITE_GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.comFor GitHub Pages, add a repository secret named VITE_GOOGLE_CLIENT_ID
under Settings → Secrets and variables → Actions → Secrets. The deployment
workflow passes that secret to Vite during the build. The client ID is public in
the built browser application; using a secret here only avoids putting it in
repository configuration. The older repository variable GOOGLE_CLIENT_ID is
also accepted as a fallback.
Files remain in user's Drive. App requests access only to Drive files created or opened through app.
| Tool | Purpose |
|---|---|
| React 19 | UI framework |
| TypeScript 5.8 | Type-safe development |
| Vite 6 | Build tool and dev server |
| IndexedDB | Client-side storage |
| jsPDF 4 | PDF generation |
| pako | Compression |
This project uses Semantic Versioning (MAJOR.MINOR.PATCH) driven automatically by semantic-release. Releases are created when commits land on master — no manual version bumps needed.
The version bump is determined by commit message prefixes:
| Prefix | Example | Result |
|---|---|---|
fix: |
fix: correct voltage label on diagram |
Patch (1.0.1) |
feat: |
feat: add zoom to fit button |
Minor (1.1.0) |
feat!: or BREAKING CHANGE: |
feat!: redesign file format |
Major (2.0.0) |
Prefixes like docs:, chore:, refactor:, style:, and test: do not trigger a release.
Contributions are welcome! Please follow these steps:
- Open an issue first for any non-trivial change to align on the approach
- Fork the repository and create a branch from
master - Name your branch descriptively:
feat/zoom-to-fit,fix/pdf-export-crash, etc. - Write commits using the Conventional Commits format — this is required for the automated release pipeline to work correctly (see Versioning)
- Open a Pull Request against
masterwith a clear description of what changed and why
Guidelines:
- Keep pull requests focused — one feature or fix per PR
- Follow the existing TypeScript conventions and component structure
- Test your changes in the browser before opening a PR; CI only verifies the build passes
For contributions to the original vanilla TypeScript version, see igoethal/eendraadschema.
Licensed under the GNU General Public License v3.0 — see LICENSE.md for details.
Copyright:
- Original eendraadschema: © Ivan Goethals
- This version: © Tim Van Onckelen
This project would not exist without Ivan Goethals, who designed and built the original eendraadschema application. The electrical schema logic, symbol library, and AREI compliance rules all originate from his work.
The original application is available at igoethal/eendraadschema.
- Report bugs
- Request features
- Questions? Open an issue or start a discussion
Run npm ci, then npm test to build the production bundle.