最近为了写技术文档，先是买OmniOutliner折腾OPML，后来又把JSDoc3的tag和template折腾的滚瓜烂熟，总之就是想用比代码更抽象但足够结构化的形式来描述出程序的内在和外在思维模型并自动编译成项目网站，突然有一天我看着这些繁杂冗长遍布着命名和符号比法律文本还生硬的文字，觉得这种事真心不应该是人来做的。受到ustwo工作室这本《像素级完美手册》的启发，我想尝试摒弃文字描述，也许视觉化的思维模型和运行状态加上代码本身的结构就有足够充足的表达能力呢。

设想中这张图以及其中包含的demo程序，会覆盖DarkDOM所有的概念、用法和API，并且起到跟screencast类似的作用。

更新：
2014.3.5 - 补全了示例，标注了阅读顺序，新增了一个总览图…
2014.3.6 - 项目仓库里添加了一个跟customelements.io上的deck组件同等效果的例子，可以比较一下。

P.S. 注意代码上的色彩不是真正的语法高亮，而且是全手工涂的……

PDF大图（推荐，可选取文字，可点链接）
PNG大图

代码
在线演示 (folder)
在线演示 (list)
在线演示 (deck)