# quakcin/digram architecture

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

- Interactive diagram: https://gitdiagram.com/quakcin/digram
- Repository: https://github.com/quakcin/digram

## Overview

#### Purpose and Runtime
DiGram is a desktop-style flowchart editor for building algorithm block diagrams and generating C source code from them. The repository is a small JavaScript application with HTML/CSS UI assets; no backend, database, or cloud service is evident.

Primary runtime entry point: `index.js`. Main application UI and behavior are split between `window/window.html`, `window/window.js`, and `window/window.css`.

#### Application Shell
`index.js` likely bootstraps the application window/runtime and loads the editor UI. The editor is represented by:
- `index.js`
- `window/window.html`
- `window/window.js`

`window/window.html` defines the renderer-facing document structure, while `window/window.css` supplies the diagram-editor presentation and `window/window.js` owns interactive editor behavior.

#### Diagram Editing Stage
The core user workflow is creating a flowchart from typed blocks: input, processing, condition, output, and function nodes. Users place blocks, connect them into a logical sequence, and add explanatory comments.

The primary editing boundary is the window renderer:
- `window/window.js`
- `window/window.html`
- `window/window.css`

Diagram state is expected to be managed in browser-side JavaScript, with visual elements rendered in the application window rather than through a server API.

#### Menu and Command Dispatch
The menu subsystem is separated from the editor window, implying application-level commands such as file operations, import/export, and code generation are initiated outside direct canvas interactions:
- `menu/menu.js`
- `menu`

This forms a control boundary between menu commands and the editor state handled in `window/window.js`.

#### Code Generation
A central product capability is transforming a completed flowchart into syntactically valid C. The README’s sample indicates generation emits includes, `main`, variable declarations, I/O statements, conditional branches, labels, and `goto`-based control flow.

The generation logic is most likely integrated into the editor/controller layer:
- `window/window.js`
- `index.js`

Generated code is local output selected by the user; no compilation or remote execution service is described.

#### Import, Export, and Filesystem Boundary
The application supports importing diagrams and exporting rendered diagrams as image formats such as PNG and JPG, plus saving generated C to a chosen filename/location. These operations cross from in-memory editor state to local filesystem dialogs and files.

Relevant command integration paths:
- `menu/menu.js`
- `window/window.js`
- `index.js`

Validation is intentionally lightweight: the product assumes diagrams are logically correct, but is expected to check completeness before generation/export.

#### Assets and Documentation
Visual resources are bundled locally:
- `fonts`
- `icons`
- `__gallery`

`Projekt-zespołowy-dokumentacja.pdf` and `tutorial.pdf` are project/user documentation, not runtime components. `package.json` defines the JavaScript runtime dependencies and scripts.

Main entry points: [`window/window.js`](https://github.com/quakcin/digram/blob/main/window/window.js) (Editor controller), [`window/window.html`](https://github.com/quakcin/digram/blob/main/window/window.html) (Editor document), [`index.js`](https://github.com/quakcin/digram/blob/main/index.js) (Application entry), [`menu/menu.js`](https://github.com/quakcin/digram/blob/main/menu/menu.js) (Application menu)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Desktop shell"]
  node_entry{{"Application entry<br/>JavaScript entry<br/>[index.js]"}}
  node_assets["Bundled visual assets<br/>Fonts, icons, gallery"]
  node_package["Runtime package<br/>Package manifest<br/>[package.json]"]
end

subgraph group_editor["Diagram editor"]
  node_window_html["Editor document<br/>HTML UI<br/>[window.html]"]
  node_window_js["Editor controller<br/>Renderer JavaScript<br/>[window.js]"]
  node_window_css["Editor styling<br/>CSS<br/>[window.css]"]
  node_diagram_state["Diagram model<br/>In-memory flowchart"]
  node_canvas["Diagram canvas<br/>Rendered editor UI"]
end

subgraph group_commands["Commands &amp; output"]
  node_menu["Application menu<br/>Command dispatcher<br/>[menu.js]"]
  node_validation["Completeness checks<br/>Validation stage"]
  node_c_generator["C code generator<br/>Transformation stage"]
  node_filesystem[("Local files &amp; dialogs<br/>Filesystem boundary")]
end

node_entry -->|"loads"| node_window_html
node_entry -->|"starts"| node_window_js
node_window_html -->|"hosts"| node_window_js
node_window_css -->|"styles"| node_window_html
node_window_js -->|"edits"| node_diagram_state
node_diagram_state -->|"renders as"| node_canvas
node_window_js -->|"updates"| node_canvas
node_menu -->|"dispatches commands to"| node_window_js
node_diagram_state -->|"checked before output"| node_validation
node_validation -->|"permits generation"| node_c_generator
node_diagram_state -->|"transforms"| node_c_generator
node_c_generator -->|"saves C source"| node_filesystem
node_validation -->|"permits image export"| node_filesystem
node_menu -->|"opens import/export dialogs"| node_filesystem
node_filesystem -->|"imports diagram"| node_diagram_state
node_assets -->|"supplies visual resources"| node_window_html
node_package -.->|"defines runtime"| node_entry

click node_entry "https://github.com/quakcin/digram/blob/main/index.js"
click node_window_html "https://github.com/quakcin/digram/blob/main/window/window.html"
click node_window_js "https://github.com/quakcin/digram/blob/main/window/window.js"
click node_window_css "https://github.com/quakcin/digram/blob/main/window/window.css"
click node_menu "https://github.com/quakcin/digram/blob/main/menu/menu.js"
click node_assets "https://github.com/quakcin/digram/tree/main/fonts"
click node_package "https://github.com/quakcin/digram/blob/main/package.json"

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_entry,node_assets,node_package toneBlue
class node_window_html,node_window_js,node_window_css,node_diagram_state,node_canvas toneAmber
class node_menu,node_validation,node_c_generator,node_filesystem toneMint
```

## Components

### Desktop shell

- [Application entry](https://github.com/quakcin/digram/blob/main/index.js): JavaScript entry · Bootstraps the desktop runtime and editor window. · `index.js`
- [Bundled visual assets](https://github.com/quakcin/digram/tree/main/fonts): Fonts, icons, gallery · `fonts`
- [Runtime package](https://github.com/quakcin/digram/blob/main/package.json): Package manifest · Defines JavaScript dependencies and scripts. · `package.json`

### Diagram editor

- [Editor document](https://github.com/quakcin/digram/blob/main/window/window.html): HTML UI · `window/window.html`
- [Editor controller](https://github.com/quakcin/digram/blob/main/window/window.js): Renderer JavaScript · Owns interactive editing, diagram state, validation, and generation. · `window/window.js`
- [Editor styling](https://github.com/quakcin/digram/blob/main/window/window.css): CSS · `window/window.css`
- **Diagram model**: In-memory flowchart · Typed blocks, connections, comments, and logical flow.
- **Diagram canvas**: Rendered editor UI

### Commands & output

- [Application menu](https://github.com/quakcin/digram/blob/main/menu/menu.js): Command dispatcher · Initiates file, import/export, and code-generation commands. · `menu/menu.js`
- **Completeness checks**: Validation stage · Checks diagram completeness before generation or export.
- **C code generator**: Transformation stage · Converts flowchart control flow into local C source.
- **Local files & dialogs**: Filesystem boundary · Loads diagrams and saves images or generated C to user-selected locations.

## Connections

- Application entry → Editor document: loads
- Application entry → Editor controller: starts
- Editor document → Editor controller: hosts
- Editor styling → Editor document: styles
- Editor controller → Diagram model: edits
- Diagram model → Diagram canvas: renders as
- Editor controller → Diagram canvas: updates
- Application menu → Editor controller: dispatches commands to
- Diagram model → Completeness checks: checked before output
- Completeness checks → C code generator: permits generation
- Diagram model → C code generator: transforms
- C code generator → Local files & dialogs: saves C source
- Completeness checks → Local files & dialogs: permits image export
- Application menu → Local files & dialogs: opens import/export dialogs
- Local files & dialogs → Diagram model: imports diagram
- Bundled visual assets → Editor document: supplies visual resources
- Runtime package → Application entry: defines runtime