# mqyqingfeng/blog architecture

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

- Interactive diagram: https://gitdiagram.com/mqyqingfeng/blog
- Repository: https://github.com/mqyqingfeng/blog

## Overview

This repository is the source collection for 冴羽’s JavaScript-focused blog: long-form articles are its main user-facing content, accompanied by runnable demonstrations and illustrative images. A reader discovers the blog through the author’s documented blog link, then reads articles or explores examples. The tree shows deep-dive and topic-series articles, plus demos spanning language features, algorithms, and browser techniques. No source excerpts were provided, so internal calls and demo-to-article relationships cannot be verified; the graph shows only the documented blog relationship.

Main entry points: [`README.md`](https://github.com/mqyqingfeng/blog/blob/master/README.md) (Blog collection)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_writing["Articles"]
  node_blog["Blog collection<br/>[README.md]"]
  node_topic_articles["Topic series"]
  node_deep_articles["JavaScript internals"]
end

subgraph group_examples["Demonstrations"]
  node_module_demos["Module systems"]
  node_generator_demo["Generator conversion<br/>[generator-es5.js]"]
  node_debounce_demos["Debounce examples"]
  node_throttle_demos["Throttle examples"]
  node_template_demos["Template examples"]
  node_browser_demos["Browser techniques"]
  node_vm_demo["Node VM demo<br/>[index.js]"]
  node_xss_demo["XSS example<br/>[06.28_sina_XSS.js]"]
  node_copy_plugin["Code-copy plugin"]
end

subgraph group_media["Visual assets"]
  node_illustrations["Topic illustrations"]
end

node_reader(("Reader"))
node_author(("冴羽"))

node_author -->|"publishes"| node_blog
node_reader -->|"visits"| node_blog

click node_blog "https://github.com/mqyqingfeng/blog/blob/master/README.md"
click node_topic_articles "https://github.com/mqyqingfeng/blog/tree/master/articles/%E4%B8%93%E9%A2%98%E7%B3%BB%E5%88%97%E6%96%87%E7%AB%A0"
click node_deep_articles "https://github.com/mqyqingfeng/blog/tree/master/articles/%E6%B7%B1%E5%85%A5%E7%B3%BB%E5%88%97%E6%96%87%E7%AB%A0"
click node_module_demos "https://github.com/mqyqingfeng/blog/tree/master/demos/ES6/module"
click node_generator_demo "https://github.com/mqyqingfeng/blog/blob/master/demos/ES6/generator/generator-es5.js"
click node_debounce_demos "https://github.com/mqyqingfeng/blog/tree/master/demos/debounce"
click node_throttle_demos "https://github.com/mqyqingfeng/blog/tree/master/demos/throttle"
click node_template_demos "https://github.com/mqyqingfeng/blog/tree/master/demos/template"
click node_browser_demos "https://github.com/mqyqingfeng/blog/tree/master/demos/web-worker"
click node_vm_demo "https://github.com/mqyqingfeng/blog/blob/master/demos/node-vm/index.js"
click node_xss_demo "https://github.com/mqyqingfeng/blog/blob/master/demos/xss/06.28_sina_XSS.js"
click node_copy_plugin "https://github.com/mqyqingfeng/blog/tree/master/demos/VuePress/vuepress-plugin-code-copy"
click node_illustrations "https://github.com/mqyqingfeng/blog/tree/master/Images"

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_blog,node_topic_articles,node_deep_articles toneBlue
class node_module_demos,node_generator_demo,node_debounce_demos,node_throttle_demos,node_template_demos,node_browser_demos,node_vm_demo,node_xss_demo,node_copy_plugin toneAmber
class node_illustrations toneMint
class node_reader,node_author toneIndigo
```

## Components

### Articles

- [Blog collection](https://github.com/mqyqingfeng/blog/blob/master/README.md): `README.md`
- [Topic series](https://github.com/mqyqingfeng/blog/tree/master/articles/%E4%B8%93%E9%A2%98%E7%B3%BB%E5%88%97%E6%96%87%E7%AB%A0): `articles/专题系列文章`
- [JavaScript internals](https://github.com/mqyqingfeng/blog/tree/master/articles/%E6%B7%B1%E5%85%A5%E7%B3%BB%E5%88%97%E6%96%87%E7%AB%A0): `articles/深入系列文章`

### Demonstrations

- [Module systems](https://github.com/mqyqingfeng/blog/tree/master/demos/ES6/module): `demos/ES6/module`
- [Generator conversion](https://github.com/mqyqingfeng/blog/blob/master/demos/ES6/generator/generator-es5.js): `demos/ES6/generator/generator-es5.js`
- [Debounce examples](https://github.com/mqyqingfeng/blog/tree/master/demos/debounce): `demos/debounce`
- [Throttle examples](https://github.com/mqyqingfeng/blog/tree/master/demos/throttle): `demos/throttle`
- [Template examples](https://github.com/mqyqingfeng/blog/tree/master/demos/template): `demos/template`
- [Browser techniques](https://github.com/mqyqingfeng/blog/tree/master/demos/web-worker): `demos/web-worker`
- [Node VM demo](https://github.com/mqyqingfeng/blog/blob/master/demos/node-vm/index.js): `demos/node-vm/index.js`
- [XSS example](https://github.com/mqyqingfeng/blog/blob/master/demos/xss/06.28_sina_XSS.js): `demos/xss/06.28_sina_XSS.js`
- [Code-copy plugin](https://github.com/mqyqingfeng/blog/tree/master/demos/VuePress/vuepress-plugin-code-copy): `demos/VuePress/vuepress-plugin-code-copy`

### Visual assets

- [Topic illustrations](https://github.com/mqyqingfeng/blog/tree/master/Images): `Images`

### Other components

- **Reader**
- **冴羽**

## Connections

- 冴羽 → Blog collection: publishes (evidence: `README.md`)
- Reader → Blog collection: visits (evidence: `README.md`)