# thekannex/mritzing architecture

> Architecture diagram of the GitHub repository thekannex/mritzing, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/thekannex/mritzing
- Repository: https://github.com/thekannex/mritzing

## Overview

Mritzing is a browser-based schematic editor. Users choose parts, place and wire them on a canvas, edit and navigate the schematic, then save or export it. Custom parts can remain local or be submitted to the shared library; administrators review submissions through a PHP API. The graph reflects documented capabilities and sampled call paths; several feature links rely on README documentation because their implementation was not sampled.

Main entry points: [`schematic/toolbar.js`](https://github.com/thekannex/mritzing/blob/main/schematic/toolbar.js) (Toolbar and panel), [`app.js`](https://github.com/thekannex/mritzing/blob/main/app.js) (App shell), [`schematic/parts-api.js`](https://github.com/thekannex/mritzing/blob/main/schematic/parts-api.js) (Parts API client), [`schematic/custom-part-editor.js`](https://github.com/thekannex/mritzing/blob/main/schematic/custom-part-editor.js) (Custom part editor)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editor["Schematic editor"]
  node_app["App shell<br/>[app.js]"]
  node_input["Canvas input<br/>[input.js]"]
  node_state["Schematic state<br/>[state.js]"]
  node_renderer["SVG renderer<br/>[renderer.js]"]
  node_toolbar["Toolbar and panel<br/>[toolbar.js]"]
  node_i18n["Language strings<br/>[i18n.js]"]
end

subgraph group_parts["Parts library"]
  node_library["Built-in parts<br/>[library.js]"]
  node_custom["Custom part editor"]
  node_localstore[("Browser local storage")]
end

subgraph group_files["Project files and export"]
  node_projectio["Project JSON I/O<br/>[project-io.js]"]
  node_export["SVG and PNG export<br/>[export.js]"]
end

subgraph group_sharing["Shared library"]
  node_partsclient["Parts API client<br/>[parts-api.js]"]
  node_adminui["Admin review dialog"]
  node_api["Parts API<br/>[parts.php]"]
  node_partstore[("Parts file store")]
end

node_user(("Editor user"))
node_sharedusers(("Community users"))
node_admin(("Administrator"))

node_user -->|"uses editor"| node_app
node_app -->|"binds events"| node_input
node_app -->|"builds UI"| node_toolbar
node_app -->|"loads shared parts"| node_partsclient
node_input -->|"edits schematic"| node_state
node_input -->|"requests render"| node_app
node_app -->|"renders canvas"| node_renderer
node_renderer -->|"reads schematic"| node_state
node_renderer -->|"renders part definitions"| node_library
node_toolbar -->|"offers parts"| node_library
node_toolbar -->|"saves and opens"| node_projectio
node_toolbar -->|"starts export"| node_export
node_toolbar -->|"opens editor"| node_custom
node_custom -->|"stores local parts"| node_localstore
node_custom -->|"submits part"| node_partsclient
node_projectio -->|"embeds custom parts"| node_localstore
node_export -->|"downloads image"| node_user
node_toolbar -->|"gets translated labels"| node_i18n
node_partsclient -->|"requests parts"| node_api
node_api -->|"reads and writes parts"| node_partstore
node_api -->|"serves approved parts"| node_sharedusers
node_sharedusers -->|"creates custom part"| node_custom
node_admin -->|"reviews submissions"| node_adminui
node_adminui -->|"requests moderation"| node_partsclient
node_partsclient -->|"sends admin actions"| node_api

click node_app "https://github.com/thekannex/mritzing/blob/main/app.js"
click node_input "https://github.com/thekannex/mritzing/blob/main/schematic/input.js"
click node_state "https://github.com/thekannex/mritzing/blob/main/schematic/state.js"
click node_renderer "https://github.com/thekannex/mritzing/blob/main/schematic/renderer.js"
click node_toolbar "https://github.com/thekannex/mritzing/blob/main/schematic/toolbar.js"
click node_library "https://github.com/thekannex/mritzing/blob/main/schematic/library.js"
click node_custom "https://github.com/thekannex/mritzing/blob/main/schematic/custom-part-editor.js"
click node_projectio "https://github.com/thekannex/mritzing/blob/main/schematic/project-io.js"
click node_export "https://github.com/thekannex/mritzing/blob/main/schematic/export.js"
click node_i18n "https://github.com/thekannex/mritzing/blob/main/schematic/i18n.js"
click node_partsclient "https://github.com/thekannex/mritzing/blob/main/schematic/parts-api.js"
click node_adminui "https://github.com/thekannex/mritzing/blob/main/ui/dialogs/admin-parts-dialog.js"
click node_api "https://github.com/thekannex/mritzing/blob/main/api/parts.php"
click node_partstore "https://github.com/thekannex/mritzing/tree/main/api/data"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_input,node_state,node_renderer,node_toolbar,node_i18n,node_user,node_sharedusers toneBlue
class node_library,node_custom,node_localstore toneAmber
class node_projectio,node_export toneMint
class node_partsclient,node_adminui,node_api,node_partstore toneRose
class node_admin toneIndigo
```

## Components

### Schematic editor

- [App shell](https://github.com/thekannex/mritzing/blob/main/app.js): `app.js`
- [Canvas input](https://github.com/thekannex/mritzing/blob/main/schematic/input.js): `schematic/input.js`
- [Schematic state](https://github.com/thekannex/mritzing/blob/main/schematic/state.js): `schematic/state.js`
- [SVG renderer](https://github.com/thekannex/mritzing/blob/main/schematic/renderer.js): `schematic/renderer.js`
- [Toolbar and panel](https://github.com/thekannex/mritzing/blob/main/schematic/toolbar.js): `schematic/toolbar.js`
- [Language strings](https://github.com/thekannex/mritzing/blob/main/schematic/i18n.js): `schematic/i18n.js`

### Parts library

- [Built-in parts](https://github.com/thekannex/mritzing/blob/main/schematic/library.js): `schematic/library.js`
- [Custom part editor](https://github.com/thekannex/mritzing/blob/main/schematic/custom-part-editor.js): `schematic/custom-part-editor.js`
- **Browser local storage**

### Project files and export

- [Project JSON I/O](https://github.com/thekannex/mritzing/blob/main/schematic/project-io.js): `schematic/project-io.js`
- [SVG and PNG export](https://github.com/thekannex/mritzing/blob/main/schematic/export.js): `schematic/export.js`

### Shared library

- [Parts API client](https://github.com/thekannex/mritzing/blob/main/schematic/parts-api.js): `schematic/parts-api.js`
- [Admin review dialog](https://github.com/thekannex/mritzing/blob/main/ui/dialogs/admin-parts-dialog.js): `ui/dialogs/admin-parts-dialog.js`
- [Parts API](https://github.com/thekannex/mritzing/blob/main/api/parts.php): `api/parts.php`
- [Parts file store](https://github.com/thekannex/mritzing/tree/main/api/data): `api/data`

### Other components

- **Editor user**
- **Community users**
- **Administrator**

## Connections

- Editor user → App shell: uses editor
- App shell → Canvas input: binds events
- App shell → Toolbar and panel: builds UI
- App shell → Parts API client: loads shared parts
- Canvas input → Schematic state: edits schematic
- Canvas input → App shell: requests render
- App shell → SVG renderer: renders canvas
- SVG renderer → Schematic state: reads schematic
- SVG renderer → Built-in parts: renders part definitions
- Toolbar and panel → Built-in parts: offers parts
- Toolbar and panel → Project JSON I/O: saves and opens
- Toolbar and panel → SVG and PNG export: starts export
- Toolbar and panel → Custom part editor: opens editor
- Custom part editor → Browser local storage: stores local parts
- Custom part editor → Parts API client: submits part
- Project JSON I/O → Browser local storage: embeds custom parts
- SVG and PNG export → Editor user: downloads image
- Toolbar and panel → Language strings: gets translated labels
- Parts API client → Parts API: requests parts
- Parts API → Parts file store: reads and writes parts
- Parts API → Community users: serves approved parts
- Community users → Custom part editor: creates custom part
- Administrator → Admin review dialog: reviews submissions
- Admin review dialog → Parts API client: requests moderation
- Parts API client → Parts API: sends admin actions