# koutarou4096/md-editor architecture

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

- Interactive diagram: https://gitdiagram.com/koutarou4096/md-editor
- Repository: https://github.com/koutarou4096/md-editor

## Overview

md-editor is a small browser-based Markdown editor for practice and notes. Its documented workflow is editing text, viewing a preview, and keeping edits in browser storage so they can be restored after reopening. Users can also save Markdown or HTML files, create PDFs, and print. The repository contains only README.md and index.html, with no source excerpts, so the graph maps these documented capabilities to the existing HTML file; it does not infer internal calls or implementation details.

Main entry points: [`index.html`](https://github.com/koutarou4096/md-editor/blob/main/index.html) (Markdown editor)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editing["Editing"]
  node_editor["Markdown editor<br/>[index.html]"]
  node_preview["Preview<br/>[index.html]"]
  node_autosave["Autosave and restore<br/>[index.html]"]
end

subgraph group_outputs["Saving and output"]
  node_md_export["Markdown save<br/>[index.html]"]
  node_html_export["HTML save<br/>[index.html]"]
  node_pdf_print["PDF and print<br/>[index.html]"]
end

node_user(("User"))
node_browser_storage[("Browser storage")]

node_user -->|"edits text"| node_editor
node_editor -->|"shows preview"| node_preview
node_editor -->|"saves edits"| node_autosave
node_autosave -->|"writes and restores"| node_browser_storage
node_user -->|"saves Markdown"| node_md_export
node_user -->|"saves HTML"| node_html_export
node_user -->|"exports or prints"| node_pdf_print

click node_editor "https://github.com/koutarou4096/md-editor/blob/main/index.html"
click node_preview "https://github.com/koutarou4096/md-editor/blob/main/index.html"
click node_autosave "https://github.com/koutarou4096/md-editor/blob/main/index.html"
click node_md_export "https://github.com/koutarou4096/md-editor/blob/main/index.html"
click node_html_export "https://github.com/koutarou4096/md-editor/blob/main/index.html"
click node_pdf_print "https://github.com/koutarou4096/md-editor/blob/main/index.html"

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_editor,node_preview,node_autosave,node_user toneBlue
class node_md_export,node_html_export,node_pdf_print,node_browser_storage toneAmber
```

## Components

### Editing

- [Markdown editor](https://github.com/koutarou4096/md-editor/blob/main/index.html): `index.html`
- [Preview](https://github.com/koutarou4096/md-editor/blob/main/index.html): `index.html`
- [Autosave and restore](https://github.com/koutarou4096/md-editor/blob/main/index.html): `index.html`

### Saving and output

- [Markdown save](https://github.com/koutarou4096/md-editor/blob/main/index.html): `index.html`
- [HTML save](https://github.com/koutarou4096/md-editor/blob/main/index.html): `index.html`
- [PDF and print](https://github.com/koutarou4096/md-editor/blob/main/index.html): `index.html`

### Other components

- **User**
- **Browser storage**

## Connections

- User → Markdown editor: edits text (evidence: `README.md`)
- Markdown editor → Preview: shows preview (evidence: `README.md`)
- Markdown editor → Autosave and restore: saves edits (evidence: `README.md`)
- Autosave and restore → Browser storage: writes and restores (evidence: `README.md`)
- User → Markdown save: saves Markdown (evidence: `README.md`)
- User → HTML save: saves HTML (evidence: `README.md`)
- User → PDF and print: exports or prints (evidence: `README.md`)