v0.21.0
v0.21.0 · Clearer study artifacts
This release changes how things look when you learn. Concept maps get a real layout engine, code gets syntax colors everywhere, AI flowcharts get cleaner routing, and every lesson can fold into a mind map.
Concept maps, rebuilt
The concept map artifact now runs on elkjs, the same Eclipse Layout Kernel family draw.io uses, loaded on demand. The AI can declare groups, and each group draws as a titled container box. Edges route orthogonally, right-angle lines that bend around boxes. The palette follows the draw.io convention, light fill with deep stroke in five hues, and the dark theme keeps the hue while inverting brightness. When the AI sends no groups, adjacency clustering draws them anyway, so a dense map still comes out gathered. The layout is deterministic, nodes never overlap, and the test suite asserts every edge endpoint lands on a node border.
Code, highlighted everywhere
Lesson text, chat messages and code walkthroughs all render with shiki now. Thirty-five common languages ship, with alias handling so js, py, sh and yml all resolve. The engine is pure JavaScript with no WASM, everything loads lazily, and the main bundle did not grow. Both themes are written into the same HTML as CSS variables in one pass. Switching theme flips the variables, no re-highlight, no flicker. An unknown language falls back to plain text.
Flowcharts on ELK
AI-drawn flowcharts lay out with ELK too. The rewrite happens only at render time, so the AI prompts and the syntax repair loop keep speaking plain flowchart. Sequence and state diagrams are untouched. One cost deserves mention. The official mermaid ELK adapter inlines its own copy of elkjs 0.9, which cannot be deduped with the 0.12 the concept map uses. Both copies sit in lazy chunks that load once, and a new build-manifest suite asserts neither ever reaches the entry bundle.
Mind maps
A brain button sits next to the read-aloud button in every lesson. One click folds the lesson's headings and lists into a collapsible mind map, on the same canvas engine the blackboard uses. Drag to pan, scroll or pinch to zoom, double-click to fit. Code blocks fold into a placeholder node, because a structure overview has no use for their content. Another click returns to the full text.
Diagram syntax repair
When the AI slips a syntax error into a mermaid diagram, the app sends the parse error back for one targeted repair pass and re-renders on success. A failed repair keeps the source-code fallback, so a broken diagram never turns into a blank card. The drawing prompt also gained a diagram-type guide and a label quoting rule, which prevents most of these errors before they happen.
All 106 deterministic suites, both typechecks, lint, the new build-manifest assertions and the real-GUI regression pass are green.
v0.21.0 · 看得清
这个版本改的是产物的长相。概念图换了真正的布局引擎,代码到处有语法配色,AI 画的流程图连线更守规矩,每节课还能一键折成思维导图。
概念图重做
概念图改用 elkjs 布局,和 draw.io 新版同一个内核家族,按需加载。AI 可以声明分组,每组画成带标题栏的容器盒。连线走正交路由,直角折线绕开盒子。配色沿用 draw.io 的习惯,浅填充配深描边共五色,暗色主题保持色相只反转明度。AI 没给分组时,按邻接关系兜底聚类,密集的关系图也能收拢成型。布局是确定性的,节点两两不重叠,测试套件连边端点必须落在节点边界上都逐条断言过。
代码到处高亮
讲解、对话、代码逐段讲解都接了 shiki,精选 35 门常用语言,别名归一,js、py、sh、yml 这些写法都认。引擎是纯 JavaScript,没有 WASM,全部懒加载,主束体积没有增加。暗亮两套颜色一次性写进同一份 HTML,切主题只翻转 CSS 变量,不重跑高亮,也就没有闪烁。不认识的语言老老实实退回纯文本。
流程图换 ELK
AI 画的流程图同样换 ELK 布局。改写只发生在渲染层,出题提示词和语法修复回路继续说原版 flowchart 方言,时序图状态图一概不动。有一处代价要交代。mermaid 官方的 ELK 适配包发布时把 elkjs 0.9 整个内联了,和概念图用的 0.12 无法去重。两份都待在懒 chunk 里,首次用到才加载一次,新增的构建清单套件断言它们永远不会进主束。
思维导图
每节课的朗读按钮旁边多了一个脑图按钮。点一下,这节课的标题和列表折成可收拢的思维导图,画布和黑板同款,拖拽平移,滚轮或双指缩放,双击适屏。代码块折成一个代码块占位节点,结构概览用不着它的内容。再点一下回到全文。
图的语法自愈
AI 偶尔把 mermaid 语法写滑丝。现在渲染失败会把解析错误带回去定点修一轮,只修语法不重画,修好自动重渲,修不好保留源码兜底,不会白屏。出题侧同时加了图类型选型指南和标签引号规则,防患在修复之前。
106 套确定性测试、两套类型检查、lint、新增的构建清单断言和真界面回归全绿。