# thisis-developer/markdown-viewer architecture

> Architecture diagram of the GitHub repository thisis-developer/markdown-viewer, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/thisis-developer/markdown-viewer
- Repository: https://github.com/thisis-developer/markdown-viewer

## Overview

Markdown Viewer is a local-first Markdown workspace delivered as a browser/PWA app and a Neutralino desktop app. Users open or create Markdown, edit and preview it, organize documents locally, then export or optionally share snapshots or collaborate in live rooms. The README documents workspace, rendering, review, import/export, and desktop workflows, but the sampled source does not expose the browser app’s central orchestration, so several workflow links rely on README statements. Sharing and SEO have clearer server-side boundaries; desktop packaging scripts are intentionally excluded.

Main entry points: [`seo/server-render.mjs`](https://github.com/thisis-developer/markdown-viewer/blob/main/seo/server-render.mjs) (SEO renderer), [`functions/api/media/[[id]].js`](https://github.com/thisis-developer/markdown-viewer/blob/main/functions/api/media/%5B%5Bid%5D%5D.js) (Media route), [`functions/live-room/[[room]].js`](https://github.com/thisis-developer/markdown-viewer/blob/main/functions/live-room/%5B%5Broom%5D%5D.js) (Live room API), [`functions/_middleware.js`](https://github.com/thisis-developer/markdown-viewer/blob/main/functions/_middleware.js) (Localized response)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workspace["Editing workspace"]
  node_browser["Browser app"]
  node_fileopen["File opening"]
  node_workspace_store[("Workspace storage")]
  node_visual_settings[("Visual settings")]
end

subgraph group_rendering["Preview and export"]
  node_renderer["Markdown preview<br/>[preview-worker.js]"]
  node_outline["Document outline<br/>[document-toc.mjs]"]
  node_export["Document export"]
end

subgraph group_collaboration["Sharing services"]
  node_snapshot["Share snapshots<br/>[&#91;&#91;id&#93;&#93;.js]"]
  node_media[("Media service<br/>[&#91;&#91;id&#93;&#93;.js]")]
  node_media_alias["Media route<br/>[&#91;&#91;id&#93;&#93;.js]"]
  node_live_api["Live room API<br/>[&#91;&#91;room&#93;&#93;.js]"]
  node_live_worker["Live room worker"]
end

subgraph group_delivery["App delivery"]
  node_desktop["Desktop app<br/>[main.js]"]
  node_seo_middleware["Localized response<br/>[_middleware.js]"]
  node_seo_render["SEO renderer<br/>[server-render.mjs]"]
  node_locales["Locale catalog<br/>[locales.mjs]"]
  node_welcome["Starter content"]
end

node_user(("User"))

node_user -->|"opens app"| node_browser
node_user -->|"opens app"| node_desktop
node_browser -->|"opens files"| node_fileopen
node_browser -->|"saves documents"| node_workspace_store
node_browser -.->|"sets appearance"| node_visual_settings
node_browser -->|"renders preview"| node_renderer
node_browser -->|"navigates headings"| node_outline
node_browser -->|"exports documents"| node_export
node_browser -->|"creates snapshots"| node_snapshot
node_browser -->|"starts live share"| node_live_api
node_browser -.->|"requests media"| node_media_alias
node_media_alias -->|"routes requests"| node_media
node_live_api -.->|"dispatches room"| node_live_worker
node_seo_middleware -->|"renders response"| node_seo_render
node_seo_render -->|"gets locale"| node_locales
node_seo_render -->|"renders starter"| node_welcome

click node_desktop "https://github.com/thisis-developer/markdown-viewer/blob/main/desktop-app/resources/js/main.js"
click node_fileopen "https://github.com/thisis-developer/markdown-viewer/blob/main/browser-drop-source.js"
click node_workspace_store "https://github.com/thisis-developer/markdown-viewer/blob/main/workspace-storage.js"
click node_visual_settings "https://github.com/thisis-developer/markdown-viewer/blob/main/visual-settings-store.js"
click node_renderer "https://github.com/thisis-developer/markdown-viewer/blob/main/preview-worker.js"
click node_outline "https://github.com/thisis-developer/markdown-viewer/blob/main/src/document-toc.mjs"
click node_snapshot "https://github.com/thisis-developer/markdown-viewer/blob/main/functions/api/share/%5B%5Bid%5D%5D.js"
click node_media "https://github.com/thisis-developer/markdown-viewer/blob/main/functions/api/image/%5B%5Bid%5D%5D.js"
click node_media_alias "https://github.com/thisis-developer/markdown-viewer/blob/main/functions/api/media/%5B%5Bid%5D%5D.js"
click node_live_api "https://github.com/thisis-developer/markdown-viewer/blob/main/functions/live-room/%5B%5Broom%5D%5D.js"
click node_live_worker "https://github.com/thisis-developer/markdown-viewer/blob/main/workers/live-room-worker.js"
click node_seo_middleware "https://github.com/thisis-developer/markdown-viewer/blob/main/functions/_middleware.js"
click node_seo_render "https://github.com/thisis-developer/markdown-viewer/blob/main/seo/server-render.mjs"
click node_locales "https://github.com/thisis-developer/markdown-viewer/blob/main/seo/locales.mjs"
click node_welcome "https://github.com/thisis-developer/markdown-viewer/blob/main/seo/welcome-content.mjs"

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_browser,node_fileopen,node_workspace_store,node_visual_settings,node_user toneBlue
class node_renderer,node_outline,node_export toneAmber
class node_snapshot,node_media,node_media_alias,node_live_api,node_live_worker toneMint
class node_desktop,node_seo_middleware,node_seo_render,node_locales,node_welcome toneRose
```

## Components

### Editing workspace

- **Browser app**
- [File opening](https://github.com/thisis-developer/markdown-viewer/blob/main/browser-drop-source.js): `browser-drop-source.js`
- [Workspace storage](https://github.com/thisis-developer/markdown-viewer/blob/main/workspace-storage.js): `workspace-storage.js`
- [Visual settings](https://github.com/thisis-developer/markdown-viewer/blob/main/visual-settings-store.js): `visual-settings-store.js`

### Preview and export

- [Markdown preview](https://github.com/thisis-developer/markdown-viewer/blob/main/preview-worker.js): `preview-worker.js`
- [Document outline](https://github.com/thisis-developer/markdown-viewer/blob/main/src/document-toc.mjs): `src/document-toc.mjs`
- **Document export**

### Sharing services

- [Share snapshots](https://github.com/thisis-developer/markdown-viewer/blob/main/functions/api/share/%5B%5Bid%5D%5D.js): `functions/api/share/[[id]].js`
- [Media service](https://github.com/thisis-developer/markdown-viewer/blob/main/functions/api/image/%5B%5Bid%5D%5D.js): `functions/api/image/[[id]].js`
- [Media route](https://github.com/thisis-developer/markdown-viewer/blob/main/functions/api/media/%5B%5Bid%5D%5D.js): `functions/api/media/[[id]].js`
- [Live room API](https://github.com/thisis-developer/markdown-viewer/blob/main/functions/live-room/%5B%5Broom%5D%5D.js): `functions/live-room/[[room]].js`
- [Live room worker](https://github.com/thisis-developer/markdown-viewer/blob/main/workers/live-room-worker.js): `workers/live-room-worker.js`

### App delivery

- [Desktop app](https://github.com/thisis-developer/markdown-viewer/blob/main/desktop-app/resources/js/main.js): `desktop-app/resources/js/main.js`
- [Localized response](https://github.com/thisis-developer/markdown-viewer/blob/main/functions/_middleware.js): `functions/_middleware.js`
- [SEO renderer](https://github.com/thisis-developer/markdown-viewer/blob/main/seo/server-render.mjs): `seo/server-render.mjs`
- [Locale catalog](https://github.com/thisis-developer/markdown-viewer/blob/main/seo/locales.mjs): `seo/locales.mjs`
- [Starter content](https://github.com/thisis-developer/markdown-viewer/blob/main/seo/welcome-content.mjs): `seo/welcome-content.mjs`

### Other components

- **User**

## Connections

- User → Browser app: opens app (evidence: `README.md`)
- User → Desktop app: opens app (evidence: `README.md`)
- Browser app → File opening: opens files (evidence: `README.md`)
- Browser app → Workspace storage: saves documents (evidence: `README.md`)
- Browser app → Visual settings: sets appearance
- Browser app → Markdown preview: renders preview (evidence: `README.md`)
- Browser app → Document outline: navigates headings (evidence: `README.md`)
- Browser app → Document export: exports documents (evidence: `README.md`)
- Browser app → Share snapshots: creates snapshots (evidence: `README.md`)
- Browser app → Live room API: starts live share (evidence: `README.md`)
- Browser app → Media route: requests media
- Media route → Media service: routes requests (evidence: `functions/api/media/[[id]].js`)
- Live room API → Live room worker: dispatches room
- Localized response → SEO renderer: renders response (evidence: `functions/_middleware.js`)
- SEO renderer → Locale catalog: gets locale (evidence: `seo/server-render.mjs`)
- SEO renderer → Starter content: renders starter (evidence: `seo/server-render.mjs`)