# 2502439129/mdslice architecture

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

- Interactive diagram: https://gitdiagram.com/2502439129/mdslice
- Repository: https://github.com/2502439129/mdslice

## Overview

MDSlice 是零构建、浏览器内运行的 Markdown 分章阅读器。用户可打开单个文档，或通过首页浏览本地目录及静态服务器目录；应用读取文档后解析 Markdown、按 H1–H3 分章，并在独立标签页中呈现正文、三级目录和当前章节的小节目录。首页目录来源、文档标签状态与章节渲染是主要内部层次；阅读器还支持文档链接跳转、扩展语法、代码高亮和公式排版。目录异步加载、解析与挂载部分关系依据 README 和所给源码摘录，未采样处不推断额外调用。

Main entry points: [`js/05-shell.js`](https://github.com/2502439129/mdslice/blob/main/js/05-shell.js) (外壳与打开), [`js/03-render.js`](https://github.com/2502439129/mdslice/blob/main/js/03-render.js) (章节与导航), [`js/06-dirs.js`](https://github.com/2502439129/mdslice/blob/main/js/06-dirs.js) (目录来源), [`js/04-tabs.js`](https://github.com/2502439129/mdslice/blob/main/js/04-tabs.js) (标签页状态)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["入口与外壳"]
  node_entry_html["应用入口<br/>[MDSlice.html]"]
  node_boot["启动流程<br/>[08-boot.js]"]
  node_shell["外壳与打开<br/>[05-shell.js]"]
  node_core["共享状态工具<br/>[01-core.js]"]
end

subgraph group_library["首页与目录"]
  node_home["首页界面<br/>[07-home.js]"]
  node_dirs["目录来源<br/>[06-dirs.js]"]
end

subgraph group_reading["文档阅读"]
  node_tabs["标签页状态<br/>[04-tabs.js]"]
  node_sections["章节与导航<br/>[03-render.js]"]
end

subgraph group_rendering["解析与呈现"]
  node_markdown["Markdown解析<br/>[02-markdown.js]"]
end

node_reader(("阅读者"))
node_server(("静态服务器"))
node_local_files(("本地文件"))
node_highlighter["代码高亮"]
node_mathjax["公式排版"]
node_browser_state["浏览器偏好"]

node_reader -->|"打开阅读器"| node_entry_html
node_entry_html -->|"启动应用"| node_boot
node_boot -->|"建立首页"| node_home
node_boot -->|"准备目录"| node_dirs
node_boot -->|"激活首页"| node_tabs
node_reader -->|"选择或拖入"| node_shell
node_shell -->|"打开文档"| node_tabs
node_shell -->|"添加目录"| node_dirs
node_local_files -->|"提供文件"| node_shell
node_local_files -->|"提供文件夹"| node_dirs
node_dirs -->|"请求目录索引"| node_server
node_server -->|"返回目录列表"| node_dirs
node_dirs -->|"提供目录树"| node_home
node_home -->|"打开所选文档"| node_tabs
node_tabs -->|"装配章节视图"| node_sections
node_sections -->|"解析章节内容"| node_markdown
node_sections -->|"呈现阅读视图"| node_tabs
node_sections -.->|"请求代码高亮"| node_highlighter
node_sections -.->|"请求公式排版"| node_mathjax
node_reader -->|"选择章节或锚点"| node_sections
node_shell -->|"保存主题与宽度"| node_browser_state
node_shell -->|"使用共享状态"| node_core
node_tabs -->|"使用共享状态"| node_core

click node_entry_html "https://github.com/2502439129/mdslice/blob/main/MDSlice.html"
click node_boot "https://github.com/2502439129/mdslice/blob/main/js/08-boot.js"
click node_shell "https://github.com/2502439129/mdslice/blob/main/js/05-shell.js"
click node_home "https://github.com/2502439129/mdslice/blob/main/js/07-home.js"
click node_dirs "https://github.com/2502439129/mdslice/blob/main/js/06-dirs.js"
click node_tabs "https://github.com/2502439129/mdslice/blob/main/js/04-tabs.js"
click node_sections "https://github.com/2502439129/mdslice/blob/main/js/03-render.js"
click node_markdown "https://github.com/2502439129/mdslice/blob/main/js/02-markdown.js"
click node_core "https://github.com/2502439129/mdslice/blob/main/js/01-core.js"

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_html,node_boot,node_shell,node_core toneBlue
class node_home,node_dirs toneAmber
class node_tabs,node_sections toneMint
class node_markdown toneRose
class node_reader,node_server,node_local_files,node_highlighter,node_mathjax,node_browser_state toneIndigo
```

## Components

### 入口与外壳

- [应用入口](https://github.com/2502439129/mdslice/blob/main/MDSlice.html): `MDSlice.html`
- [启动流程](https://github.com/2502439129/mdslice/blob/main/js/08-boot.js): `js/08-boot.js`
- [外壳与打开](https://github.com/2502439129/mdslice/blob/main/js/05-shell.js): `js/05-shell.js`
- [共享状态工具](https://github.com/2502439129/mdslice/blob/main/js/01-core.js): `js/01-core.js`

### 首页与目录

- [首页界面](https://github.com/2502439129/mdslice/blob/main/js/07-home.js): `js/07-home.js`
- [目录来源](https://github.com/2502439129/mdslice/blob/main/js/06-dirs.js): `js/06-dirs.js`

### 文档阅读

- [标签页状态](https://github.com/2502439129/mdslice/blob/main/js/04-tabs.js): `js/04-tabs.js`
- [章节与导航](https://github.com/2502439129/mdslice/blob/main/js/03-render.js): `js/03-render.js`

### 解析与呈现

- [Markdown解析](https://github.com/2502439129/mdslice/blob/main/js/02-markdown.js): `js/02-markdown.js`

### Other components

- **阅读者**
- **静态服务器**
- **本地文件**
- **代码高亮**
- **公式排版**
- **浏览器偏好**

## Connections

- 阅读者 → 应用入口: 打开阅读器
- 应用入口 → 启动流程: 启动应用
- 启动流程 → 首页界面: 建立首页
- 启动流程 → 目录来源: 准备目录
- 启动流程 → 标签页状态: 激活首页
- 阅读者 → 外壳与打开: 选择或拖入
- 外壳与打开 → 标签页状态: 打开文档
- 外壳与打开 → 目录来源: 添加目录
- 本地文件 → 外壳与打开: 提供文件
- 本地文件 → 目录来源: 提供文件夹
- 目录来源 → 静态服务器: 请求目录索引
- 静态服务器 → 目录来源: 返回目录列表
- 目录来源 → 首页界面: 提供目录树
- 首页界面 → 标签页状态: 打开所选文档
- 标签页状态 → 章节与导航: 装配章节视图
- 章节与导航 → Markdown解析: 解析章节内容
- 章节与导航 → 标签页状态: 呈现阅读视图
- 章节与导航 → 代码高亮: 请求代码高亮
- 章节与导航 → 公式排版: 请求公式排版
- 阅读者 → 章节与导航: 选择章节或锚点
- 外壳与打开 → 浏览器偏好: 保存主题与宽度
- 外壳与打开 → 共享状态工具: 使用共享状态
- 标签页状态 → 共享状态工具: 使用共享状态