@bytechain.cn/colamd 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (157) hide show
  1. package/.github/workflows/release.yml +66 -0
  2. package/.trae/documents/fix-mermaid-colors-and-sankey.md +50 -0
  3. package/CLAUDE.md +87 -0
  4. package/LICENSE +21 -0
  5. package/README.md +540 -0
  6. package/README_CN.md +543 -0
  7. package/demo.md +486 -0
  8. package/dist/main/index.js +735 -0
  9. package/dist/preload/index.js +71 -0
  10. package/dist/renderer/assets/KaTeX_AMS-Regular-BQhdFMY1.woff2 +0 -0
  11. package/dist/renderer/assets/KaTeX_AMS-Regular-DMm9YOAa.woff +0 -0
  12. package/dist/renderer/assets/KaTeX_AMS-Regular-DRggAlZN.ttf +0 -0
  13. package/dist/renderer/assets/KaTeX_Caligraphic-Bold-ATXxdsX0.ttf +0 -0
  14. package/dist/renderer/assets/KaTeX_Caligraphic-Bold-BEiXGLvX.woff +0 -0
  15. package/dist/renderer/assets/KaTeX_Caligraphic-Bold-Dq_IR9rO.woff2 +0 -0
  16. package/dist/renderer/assets/KaTeX_Caligraphic-Regular-CTRA-rTL.woff +0 -0
  17. package/dist/renderer/assets/KaTeX_Caligraphic-Regular-Di6jR-x-.woff2 +0 -0
  18. package/dist/renderer/assets/KaTeX_Caligraphic-Regular-wX97UBjC.ttf +0 -0
  19. package/dist/renderer/assets/KaTeX_Fraktur-Bold-BdnERNNW.ttf +0 -0
  20. package/dist/renderer/assets/KaTeX_Fraktur-Bold-BsDP51OF.woff +0 -0
  21. package/dist/renderer/assets/KaTeX_Fraktur-Bold-CL6g_b3V.woff2 +0 -0
  22. package/dist/renderer/assets/KaTeX_Fraktur-Regular-CB_wures.ttf +0 -0
  23. package/dist/renderer/assets/KaTeX_Fraktur-Regular-CTYiF6lA.woff2 +0 -0
  24. package/dist/renderer/assets/KaTeX_Fraktur-Regular-Dxdc4cR9.woff +0 -0
  25. package/dist/renderer/assets/KaTeX_Main-Bold-Cx986IdX.woff2 +0 -0
  26. package/dist/renderer/assets/KaTeX_Main-Bold-Jm3AIy58.woff +0 -0
  27. package/dist/renderer/assets/KaTeX_Main-Bold-waoOVXN0.ttf +0 -0
  28. package/dist/renderer/assets/KaTeX_Main-BoldItalic-DxDJ3AOS.woff2 +0 -0
  29. package/dist/renderer/assets/KaTeX_Main-BoldItalic-DzxPMmG6.ttf +0 -0
  30. package/dist/renderer/assets/KaTeX_Main-BoldItalic-SpSLRI95.woff +0 -0
  31. package/dist/renderer/assets/KaTeX_Main-Italic-3WenGoN9.ttf +0 -0
  32. package/dist/renderer/assets/KaTeX_Main-Italic-BMLOBm91.woff +0 -0
  33. package/dist/renderer/assets/KaTeX_Main-Italic-NWA7e6Wa.woff2 +0 -0
  34. package/dist/renderer/assets/KaTeX_Main-Regular-B22Nviop.woff2 +0 -0
  35. package/dist/renderer/assets/KaTeX_Main-Regular-Dr94JaBh.woff +0 -0
  36. package/dist/renderer/assets/KaTeX_Main-Regular-ypZvNtVU.ttf +0 -0
  37. package/dist/renderer/assets/KaTeX_Math-BoldItalic-B3XSjfu4.ttf +0 -0
  38. package/dist/renderer/assets/KaTeX_Math-BoldItalic-CZnvNsCZ.woff2 +0 -0
  39. package/dist/renderer/assets/KaTeX_Math-BoldItalic-iY-2wyZ7.woff +0 -0
  40. package/dist/renderer/assets/KaTeX_Math-Italic-DA0__PXp.woff +0 -0
  41. package/dist/renderer/assets/KaTeX_Math-Italic-flOr_0UB.ttf +0 -0
  42. package/dist/renderer/assets/KaTeX_Math-Italic-t53AETM-.woff2 +0 -0
  43. package/dist/renderer/assets/KaTeX_SansSerif-Bold-CFMepnvq.ttf +0 -0
  44. package/dist/renderer/assets/KaTeX_SansSerif-Bold-D1sUS0GD.woff2 +0 -0
  45. package/dist/renderer/assets/KaTeX_SansSerif-Bold-DbIhKOiC.woff +0 -0
  46. package/dist/renderer/assets/KaTeX_SansSerif-Italic-C3H0VqGB.woff2 +0 -0
  47. package/dist/renderer/assets/KaTeX_SansSerif-Italic-DN2j7dab.woff +0 -0
  48. package/dist/renderer/assets/KaTeX_SansSerif-Italic-YYjJ1zSn.ttf +0 -0
  49. package/dist/renderer/assets/KaTeX_SansSerif-Regular-BNo7hRIc.ttf +0 -0
  50. package/dist/renderer/assets/KaTeX_SansSerif-Regular-CS6fqUqJ.woff +0 -0
  51. package/dist/renderer/assets/KaTeX_SansSerif-Regular-DDBCnlJ7.woff2 +0 -0
  52. package/dist/renderer/assets/KaTeX_Script-Regular-C5JkGWo-.ttf +0 -0
  53. package/dist/renderer/assets/KaTeX_Script-Regular-D3wIWfF6.woff2 +0 -0
  54. package/dist/renderer/assets/KaTeX_Script-Regular-D5yQViql.woff +0 -0
  55. package/dist/renderer/assets/KaTeX_Size1-Regular-C195tn64.woff +0 -0
  56. package/dist/renderer/assets/KaTeX_Size1-Regular-Dbsnue_I.ttf +0 -0
  57. package/dist/renderer/assets/KaTeX_Size1-Regular-mCD8mA8B.woff2 +0 -0
  58. package/dist/renderer/assets/KaTeX_Size2-Regular-B7gKUWhC.ttf +0 -0
  59. package/dist/renderer/assets/KaTeX_Size2-Regular-Dy4dx90m.woff2 +0 -0
  60. package/dist/renderer/assets/KaTeX_Size2-Regular-oD1tc_U0.woff +0 -0
  61. package/dist/renderer/assets/KaTeX_Size3-Regular-CTq5MqoE.woff +0 -0
  62. package/dist/renderer/assets/KaTeX_Size3-Regular-DgpXs0kz.ttf +0 -0
  63. package/dist/renderer/assets/KaTeX_Size4-Regular-BF-4gkZK.woff +0 -0
  64. package/dist/renderer/assets/KaTeX_Size4-Regular-DWFBv043.ttf +0 -0
  65. package/dist/renderer/assets/KaTeX_Size4-Regular-Dl5lxZxV.woff2 +0 -0
  66. package/dist/renderer/assets/KaTeX_Typewriter-Regular-C0xS9mPB.woff +0 -0
  67. package/dist/renderer/assets/KaTeX_Typewriter-Regular-CO6r4hn1.woff2 +0 -0
  68. package/dist/renderer/assets/KaTeX_Typewriter-Regular-D3Ib7_Hf.ttf +0 -0
  69. package/dist/renderer/assets/arc-tTbbM8LO.js +131 -0
  70. package/dist/renderer/assets/architectureDiagram-3BPJPVTR-CEgYow6c.js +8720 -0
  71. package/dist/renderer/assets/blockDiagram-GPEHLZMM-LHyVtPwW.js +3825 -0
  72. package/dist/renderer/assets/c4Diagram-AAUBKEIU-C1P1eJrf.js +2482 -0
  73. package/dist/renderer/assets/channel-upve91Tq.js +7 -0
  74. package/dist/renderer/assets/chunk-2J33WTMH-lag2vhq9.js +24 -0
  75. package/dist/renderer/assets/chunk-4BX2VUAB-BXJ8Ggh-.js +16 -0
  76. package/dist/renderer/assets/chunk-55IACEB6-CiBpxRa1.js +13 -0
  77. package/dist/renderer/assets/chunk-727SXJPM-ODeKQFXC.js +2016 -0
  78. package/dist/renderer/assets/chunk-AQP2D5EJ-BK7xJolB.js +1953 -0
  79. package/dist/renderer/assets/chunk-FMBD7UC4-BxpCZPtz.js +19 -0
  80. package/dist/renderer/assets/chunk-ND2GUHAM-CqqaU9Ue.js +116 -0
  81. package/dist/renderer/assets/chunk-QZHKN3VN-Biq_K124.js +19 -0
  82. package/dist/renderer/assets/classDiagram-4FO5ZUOK-Cq95X99o.js +23 -0
  83. package/dist/renderer/assets/classDiagram-v2-Q7XG4LA2-Cq95X99o.js +23 -0
  84. package/dist/renderer/assets/cose-bilkent-S5V4N54A-XasiD0bu.js +4942 -0
  85. package/dist/renderer/assets/cytoscape.esm-CpHeHM5e.js +30269 -0
  86. package/dist/renderer/assets/dagre-BM42HDAG-Nq84Gfx4.js +705 -0
  87. package/dist/renderer/assets/defaultLocale-B2RvLBDe.js +206 -0
  88. package/dist/renderer/assets/diagram-2AECGRRQ-DwuB1GWt.js +301 -0
  89. package/dist/renderer/assets/diagram-5GNKFQAL-C2tgeI1h.js +169 -0
  90. package/dist/renderer/assets/diagram-KO2AKTUF-D5KzjNBc.js +632 -0
  91. package/dist/renderer/assets/diagram-LMA3HP47-C12xHS1c.js +212 -0
  92. package/dist/renderer/assets/diagram-OG6HWLK6-CnxI9oEa.js +851 -0
  93. package/dist/renderer/assets/erDiagram-TEJ5UH35-D_uPaKwn.js +1227 -0
  94. package/dist/renderer/assets/flowDiagram-I6XJVG4X-B6q_1-tE.js +2332 -0
  95. package/dist/renderer/assets/ganttDiagram-6RSMTGT7-CFo7ifF9.js +3720 -0
  96. package/dist/renderer/assets/gitGraphDiagram-PVQCEYII-WSexHTnq.js +1373 -0
  97. package/dist/renderer/assets/graph-DyX_9f6d.js +1988 -0
  98. package/dist/renderer/assets/index-DW7LS8C1.js +72292 -0
  99. package/dist/renderer/assets/index-dyHEFYvY.css +2184 -0
  100. package/dist/renderer/assets/infoDiagram-5YYISTIA-DaeJdLRq.js +31 -0
  101. package/dist/renderer/assets/init-ZxktEp_H.js +16 -0
  102. package/dist/renderer/assets/ishikawaDiagram-YF4QCWOH-DDCZc35f.js +967 -0
  103. package/dist/renderer/assets/journeyDiagram-JHISSGLW-BEdmpAgl.js +1255 -0
  104. package/dist/renderer/assets/kanban-definition-UN3LZRKU-BEFtQcFb.js +1052 -0
  105. package/dist/renderer/assets/layout-CAJgQHdw.js +2610 -0
  106. package/dist/renderer/assets/linear-B2ggJ8Am.js +340 -0
  107. package/dist/renderer/assets/mindmap-definition-RKZ34NQL-DSxVgHB5.js +1180 -0
  108. package/dist/renderer/assets/ordinal-DSZU4PqD.js +76 -0
  109. package/dist/renderer/assets/pieDiagram-4H26LBE5-CwYoJBuL.js +246 -0
  110. package/dist/renderer/assets/quadrantDiagram-W4KKPZXB-CST9Fvg9.js +1344 -0
  111. package/dist/renderer/assets/requirementDiagram-4Y6WPE33-DtrH52jS.js +1204 -0
  112. package/dist/renderer/assets/sankeyDiagram-5OEKKPKP-ca1tPzJ_.js +1274 -0
  113. package/dist/renderer/assets/sequenceDiagram-3UESZ5HK-Dfp1EJZ7.js +4514 -0
  114. package/dist/renderer/assets/stateDiagram-AJRCARHV-Bha2QoNB.js +450 -0
  115. package/dist/renderer/assets/stateDiagram-v2-BHNVJYJU-DWgFUYu1.js +21 -0
  116. package/dist/renderer/assets/timeline-definition-PNZ67QCA-C3h_-OTj.js +1596 -0
  117. package/dist/renderer/assets/vennDiagram-CIIHVFJN-DFzjSrZi.js +2486 -0
  118. package/dist/renderer/assets/wardley-L42UT6IY-Cx-VbqoS.js +30699 -0
  119. package/dist/renderer/assets/wardleyDiagram-YWT4CUSO-S2D9XqX6.js +975 -0
  120. package/dist/renderer/assets/xychartDiagram-2RQKCTM6-Cfxigbts.js +1932 -0
  121. package/dist/renderer/index.html +19 -0
  122. package/docs/agent-diff-view.md +48 -0
  123. package/electron-builder.yml +57 -0
  124. package/electron.vite.config.ts +30 -0
  125. package/package.json +40 -0
  126. package/resources/entitlements.mac.plist +12 -0
  127. package/resources/icon.icns +0 -0
  128. package/resources/icon.png +0 -0
  129. package/resources/icon.svg +23 -0
  130. package/resources/templates/slides/icon.png +0 -0
  131. package/resources/templates/slides/slides-template.md +74 -0
  132. package/resources/templates/slides/template.html +535 -0
  133. package/scripts/afterPack.js +13 -0
  134. package/src/main/index.ts +881 -0
  135. package/src/preload/index.ts +110 -0
  136. package/src/renderer/editor/editor.ts +204 -0
  137. package/src/renderer/editor/html-view.ts +15 -0
  138. package/src/renderer/editor/plugins/index.ts +76 -0
  139. package/src/renderer/editor/plugins/math-plugin.ts +297 -0
  140. package/src/renderer/editor/plugins/mermaid-plugin-custom.css +431 -0
  141. package/src/renderer/editor/plugins/mermaid-plugin-dark.css +428 -0
  142. package/src/renderer/editor/plugins/mermaid-plugin-elegant.css +443 -0
  143. package/src/renderer/editor/plugins/mermaid-plugin-newsprint.css +208 -0
  144. package/src/renderer/editor/plugins/mermaid-plugin.css +111 -0
  145. package/src/renderer/editor/plugins/mermaid-plugin.ts +679 -0
  146. package/src/renderer/env.d.ts +7 -0
  147. package/src/renderer/index.html +18 -0
  148. package/src/renderer/main.ts +303 -0
  149. package/src/renderer/themes/base.css +509 -0
  150. package/src/renderer/themes/theme-manager.ts +40 -0
  151. package/themes/README.md +280 -0
  152. package/themes/elegant.css +664 -0
  153. package/themes/guizang.css +732 -0
  154. package/tsconfig.json +14 -0
  155. package/tsconfig.main.json +11 -0
  156. package/tsconfig.preload.json +11 -0
  157. package/tsconfig.renderer.json +12 -0
package/README.md ADDED
@@ -0,0 +1,540 @@
1
+ # ColaMD (Extended)
2
+
3
+ **Markdown as Database. The Agent Native Editor and Rich Content Rendering Platform.**
4
+
5
+ Extended from [marswaveai/ColaMD](https://github.com/marswaveai/colamd) v1.5.0 with a new **Renderer Plugin System** that supports WYSIWYG editing and rendering of math equations, Mermaid diagrams, and more. Markdown is no longer just plain text — it becomes a true content database.
6
+
7
+ Real-time collaboration between humans and AI agents — see your agent's changes as they happen. Turn any Markdown file into a slide deck, blog post, resume, or product page.
8
+
9
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
10
+ [![GitHub release](https://img.shields.io/github/release/marswaveai/colamd.svg)](https://github.com/marswaveai/colamd/releases)
11
+
12
+ **This Extended Edition**: [git@github.com:byteuser1977/ColaMD-extend.git](https://github.com/byteuser1977/ColaMD-extend)
13
+
14
+ [Features](#features) | [Renderer Plugins](#renderer-plugin-system) | [Plug Menu](#plug-menu--plugin-render-control) | [Quick Start](#quick-start) | [Themes](#theme-system) | [Architecture](#technical-architecture) | [中文](README_CN.md)
15
+
16
+ ---
17
+
18
+ ## Why ColaMD?
19
+
20
+ AI agents are rewriting how we work. They edit files, generate docs, and produce reports — all in Markdown.
21
+
22
+ But how do you **watch** an agent work? You close the file. You reopen it. You wait.
23
+
24
+ **ColaMD changes this.** Open a `.md` file in ColaMD, let your agent edit it, and watch the content update in real time — like pair programming with an AI. No refresh, no reload, no friction.
25
+
26
+ This is what **Agent Native** means: built from the ground up for a world where humans and agents collaborate on the same files.
27
+
28
+ ---
29
+
30
+ ## What's Different from the Original
31
+
32
+ This repository extends **[marswaveai/ColaMD](https://github.com/marswaveai/colamd)** v1.5.0 with the following key differences:
33
+
34
+ | Aspect | Original ColaMD | This Extended Edition |
35
+ |--------|-----------------|----------------------|
36
+ | Content rendering | Plain Markdown text (GFM + Commonmark) only | **Markdown + Math Equations + Mermaid Diagrams** |
37
+ | Plugin system | None | **Declarative plugin architecture, independently toggleable, dynamically registered** |
38
+ | Math support | ❌ | ✅ KaTeX inline/block equations, live editing, PNG export |
39
+ | Diagram support | ❌ | ✅ Mermaid full-type diagrams (17+ types), multi-theme adaptation, PNG export |
40
+ | Dual-mode toggle | N/A | ✅ Each plugin supports **Rendered / Source Edit mode** one-click toggle |
41
+
42
+ > All original features are fully preserved: Agent real-time sync, activity indicator, WYSIWYG editor, slide system, themes & export, etc.
43
+
44
+ ### Demo Document
45
+
46
+ This project includes a comprehensive demo document [`demo.md`](demo.md) that covers:
47
+
48
+ - **Math Equations**: 7 inline equations + 6 block equations (including systems of equations, matrices, physics formulas)
49
+ - **Mermaid Diagrams**: All 17 diagram types (flowchart, sequence, class, state, ER, Gantt, pie, journey, git graph, mindmap, timeline, quadrant, XY chart, C4 context, Sankey, block, complex clustered)
50
+ - **Mixed Content**: Formulas and diagrams rendered together in the same document
51
+
52
+ Open `demo.md` to fully test the plugin rendering, mode switching, source editing, and PNG export capabilities of the extended ColaMD.
53
+
54
+ ---
55
+
56
+ ## Features
57
+
58
+ ### 🔗 Agent Native (Inherited from Original)
59
+
60
+ - **Live Agent Sync** — When an AI agent (Claude Code, Cursor, Copilot, etc.) modifies your `.md` file, ColaMD detects changes via `fs.watch` and refreshes instantly. No manual reload needed. This is the core feature.
61
+ - **Agent Activity Indicator** — A breathing dot in the titlebar tells you the agent's status: orange pulse while writing, green flash when done.
62
+ - **Cmd+Click Links** — Click any link in the editor to open it directly in your browser.
63
+
64
+ ### ✏️ Editor Core (Inherited from Original)
65
+
66
+ - **True WYSIWYG** — Type Markdown, see rich text rendered instantly. No split-pane preview needed.
67
+ - **Smart Line Breaks** — Single newlines render as `<br>`, matching how AI agents write Markdown.
68
+ - **Rich Text Copy** — Copy content and paste into WeChat, email, or any rich text editor with formatting fully preserved.
69
+ - **Minimal by Design** — No toolbar, no sidebar, no distractions. Just you and your content.
70
+
71
+ ### 📊 Slides — Markdown as Database (Inherited from Original)
72
+
73
+ HTML is hard to edit. Markdown is easy.
74
+
75
+ ColaMD introduces a new idea: **Markdown as Database**. Your `.md` file is the content layer. HTML templates are the view layer. Change content by editing Markdown — never touch HTML.
76
+
77
+ One Markdown file, many possible renderings: slides, blog, resume, product page... Future templates can consume the same file in completely different ways.
78
+
79
+ #### How to Use
80
+
81
+ - **File → New Slides (`⌘⇧N`)** — Creates a `slides.md` tutorial template and opens it in the editor
82
+ - **File → Open as Slides (`⌘⇧P`)** — Spins up a local server and opens your current `.md` file as a slide deck in the browser
83
+ - **File → Export Slides...** — Export a shareable version (single-file HTML or folder with video resources)
84
+
85
+ #### Slide Format
86
+
87
+ ```markdown
88
+ ---
89
+ kicker: YOUR BRAND
90
+ chip: Event Name · 2026
91
+ page: YOUR NAME
92
+ ---
93
+
94
+ <!-- type: cover -->
95
+ # Title
96
+ Subtitle here
97
+
98
+ ---
99
+
100
+ <!-- type: statement -->
101
+ ## Key Message
102
+ One powerful sentence.
103
+ ```
104
+
105
+ Supported layouts: `cover` · `statement` · `section` · `video` · `thankyou`
106
+
107
+ Optional: background image (`bg: cover.png`), video embed (`src: demo.mp4`), inline image preview (`preview: screenshot.png`).
108
+
109
+ No image? The cover falls back to a clean orange-on-white design — it just works.
110
+
111
+ ### 📤 Export Capabilities
112
+
113
+ - **PDF / HTML export**
114
+ - **Slide export** — Single HTML file (images Base64-inlined) or folder format (with video resources)
115
+ - **Equation / Diagram PNG export** — Right-click to export as high-definition PNG images (2x scaling)
116
+
117
+ ### 🎨 Themes & Cross-Platform (Inherited from Original)
118
+
119
+ - **4 built-in themes** + [downloadable themes](themes/) + custom CSS import
120
+ - **Cross-platform** — macOS (.dmg), Windows (.exe), Linux (.AppImage / .deb)
121
+
122
+ ---
123
+
124
+ ## Renderer Plugin System
125
+
126
+ > ⭐ This is the core incremental feature of this extended edition. Plugins use a declarative registration architecture — each plugin is independently encapsulated and can be individually enabled or disabled.
127
+
128
+ ### Architecture Overview
129
+
130
+ ```
131
+ src/renderer/editor/plugins/
132
+ ├── index.ts # Plugin manager (register/query/toggle)
133
+ ├── math-plugin.ts # 📐 Math equation renderer plugin
134
+ ├── mermaid-plugin.ts # 🔀 Mermaid diagram renderer plugin
135
+ ├── mermaid-plugin.css # Mermaid base styles
136
+ ├── mermaid-plugin-dark.css # Mermaid dark theme
137
+ ├── mermaid-plugin-elegant.css # Mermaid elegant theme
138
+ └── mermaid-plugin-newsprint.css # Mermaid newsprint theme
139
+ ```
140
+
141
+ Every plugin follows a unified design pattern:
142
+
143
+ ```
144
+ Schema Definition → NodeView Interaction → Remark Parsing → Markdown Serialization → PNG Export → Rendered/Source Dual Mode
145
+ ```
146
+
147
+ ---
148
+
149
+ ### 📐 Math Plugin — Equation Rendering
150
+
151
+ **Source**: [math-plugin.ts](src/renderer/editor/plugins/math-plugin.ts) | **Dependencies**: [KaTeX](https://katex.org/) + remark-math
152
+
153
+ | Property | Description |
154
+ |-----------|-------------|
155
+ | Plugin ID | `math` |
156
+ | Default Enabled | ✅ Yes |
157
+ | Context Menu | Save Equation as PNG |
158
+ | Associated Nodes | `math_inline`, `math_block` |
159
+
160
+ #### Supported Syntax
161
+
162
+ ```markdown
163
+ Inline equation: mass-energy equivalence $E = mc^2$ embedded within a paragraph.
164
+
165
+ Block equation (centered display):
166
+ $$
167
+ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
168
+ $$
169
+ ```
170
+
171
+ #### Feature Details
172
+
173
+ - **Inline equations (`$...$`)** — Uses `<span class="math-inline">` container, KaTeX rendered (`displayMode: false`), supports rendered / raw dual-mode toggle
174
+ - **Block equations (`$$...$$`)** — Uses `<div class="math-block">` container, KaTeX rendered (`displayMode: true`, centered display), raw mode uses `<textarea>` with auto-adjusting row count
175
+ - **Live editing** — Edit LaTeX source code directly in raw mode; auto-save and re-render on blur
176
+ - **Graceful fallback** — KaTeX rendering failures degrade elegantly to plain text display without blocking the editing workflow
177
+ - **PNG export** — Canvas + SVG foreignObject technology, 2x scaled high-definition output, white background, 16px padding
178
+
179
+ ---
180
+
181
+ ### 🔀 Mermaid Plugin — Diagram Rendering
182
+
183
+ **Source**: [mermaid-plugin.ts](src/renderer/editor/plugins/mermaid-plugin.ts) | **Dependencies**: [Mermaid.js](https://mermaid.js.org/)
184
+
185
+ | Property | Description |
186
+ |-----------|-------------|
187
+ | Plugin ID | `mermaid` |
188
+ | Default Enabled | ✅ Yes |
189
+ | Context Menu | Save Diagram as PNG |
190
+ | Associated Nodes | `mermaid_block` |
191
+
192
+ #### Supported Diagram Types (17+)
193
+
194
+ ```markdown
195
+ ```mermaid
196
+ graph TD
197
+ A[Markdown] --> B[ColaMD]
198
+ B --> C[Math Plugin]
199
+ B --> D[Mermaid Plugin]
200
+ C --> E[Rich Content]
201
+ D --> E
202
+ ```
203
+ ```
204
+
205
+ | Category | Supported Diagrams |
206
+ |----------|-------------------|
207
+ | Flowchart | `graph` (TD/LR/RL/BT), `flowchart` |
208
+ | Sequence Diagram | `sequenceDiagram` |
209
+ | Class Diagram | `classDiagram` |
210
+ | State Diagram | `stateDiagram-v2` |
211
+ | ER Diagram | `erDiagram` |
212
+ | User Journey | `journey` |
213
+ | Pie Chart | `pie` |
214
+ | Gantt Chart | `gantt` |
215
+ | Git Graph | `gitGraph` |
216
+ | Mind Map | `mindmap` |
217
+ | Timeline | `timeline` |
218
+ | Quadrant Chart | `quadrantChart` |
219
+ | XY/Line/Bar Chart | `xyChart` |
220
+ | C4 Architecture | `C4Context`, `C4Container`, `C4Component`, `C4Dynamic`, `C4Deployment` |
221
+ | Sankey Diagram | `sankey-beta` |
222
+ | Block Diagram | `block-beta` |
223
+ | Architecture Diagram | `architecture-beta` |
224
+
225
+ #### Feature Details
226
+
227
+ - **Input shortcut rule** — Typing `\`\`\`mermaid` followed by Enter auto-converts to a mermaid_block node, no manual action needed
228
+ - **Dual-mode toggle** — One-click switch between rendered preview and source editing; raw mode uses `<textarea>` for direct Mermaid code editing
229
+ - **Async-safe rendering** — Render counter prevents race conditions, ensuring displayed results always match the latest code
230
+ - **Multi-theme deep adaptation** — Each built-in theme has a corresponding Mermaid color scheme (see theme adaptation table below)
231
+ - **C4 architecture-specific colors** — Independent semantic color configurations for persons/systems/containers/components
232
+ - **Auto node height adjustment** — Container height auto-adjusts after rendering (+6px padding) to prevent content overflow
233
+ - **PNG export** — SVG normalization → Image → Canvas → PNG, 2x high-definition output, white background
234
+
235
+ #### Mermaid Theme Adaptation
236
+
237
+ | UI Theme | Mermaid Theme Style | Font | Highlights |
238
+ |----------|---------------------|------|------------|
239
+ | **Light** | Default | System default | Clean & bright |
240
+ | **Dark** | GitHub Dark | System default | `#0d1117` background, `#8b949e` border/text |
241
+ | **Elegant** | Custom warm palette | LXGW WenKai | `#e8e2db` background, warm brown cScale |
242
+ | **Newsprint** | Print style | PT Serif | Serif font, newsprint texture |
243
+
244
+ ---
245
+
246
+ ## How It Works
247
+
248
+ ```
249
+ ┌─────────────┐ writes ┌──────────────┐
250
+ │ AI Agent │ ──────────────▶│ .md file │
251
+ │ (Claude, │ │ │
252
+ │ Cursor...) │ └──────┬───────┘
253
+ └─────────────┘ │
254
+ fs.watch detects change
255
+
256
+ ┌───────▼───────┐
257
+ │ ColaMD │
258
+ │ auto-refresh │
259
+ │ ✨ live! │
260
+ │ │
261
+ │ ┌───────────┐ │
262
+ │ │ Plugin │ │
263
+ │ │ ├─ Math │ │
264
+ │ │ └─ Mermaid │ │
265
+ │ └───────────┘ │
266
+ └───────────────┘
267
+ ```
268
+
269
+ 1. Open any `.md` file in ColaMD
270
+ 2. Let your AI agent edit that file
271
+ 3. Watch the content update in real time — including instant rendering of math equations and Mermaid diagrams
272
+ 4. The indicator dot pulses orange while the agent writes
273
+
274
+ No configuration needed. It just works out of the box.
275
+
276
+ ---
277
+
278
+ ## Plug Menu — Plugin Render Control
279
+
280
+ ColaMD provides a **Plug** menu in the top menu bar to control renderer plugin behavior. Each registered plugin (e.g., Math, Mermaid) can be independently managed through this menu.
281
+
282
+ ### Menu Structure
283
+
284
+ ```
285
+ Plug
286
+ ├── Math
287
+ │ ├── Rendered # Rendered mode: display rich text effects of equations/diagrams
288
+ │ └── Raw # Source mode: display raw Markdown code, editable directly
289
+ └── Mermaid
290
+ ├── Rendered # Rendered mode: display SVG visualization of diagrams
291
+ └── Raw # Source mode: display Mermaid code, editable directly
292
+ ```
293
+
294
+ ### Rendered Mode
295
+
296
+ - Plugin content is presented as rich text
297
+ - **Math**: Beautiful math equations rendered by KaTeX, inline equations embedded in paragraphs, block equations centered
298
+ - **Mermaid**: SVG vector diagrams, supporting visualization of 17+ diagram types
299
+ - Right-click to export as PNG images
300
+
301
+ ### Source Mode (Raw)
302
+
303
+ - Plugin content is presented as raw Markdown source
304
+ - Uses `<textarea>` to display and edit code directly
305
+ - **Live editing**: Edit LaTeX equations or Mermaid diagram code directly in the text box
306
+ - **Auto-save**: Modifications are automatically saved on blur, instantly switching back to rendered mode to display updated results
307
+ - Text box height auto-adjusts based on content line count to avoid scrollbars
308
+
309
+ ### Usage Example
310
+
311
+ 1. Enter a Mermaid code block:
312
+ ````markdown
313
+ ```mermaid
314
+ graph TD
315
+ A[Start] --> B[Process]
316
+ B --> C[End]
317
+ ```
318
+ ````
319
+ 2. Click **Plug → Mermaid → Rendered** to view the diagram
320
+ 3. Click **Plug → Mermaid → Raw** to switch to source mode, edit nodes and connections directly
321
+ 4. Click elsewhere in the editor to blur, auto-save and re-render
322
+
323
+ ### Design Intent
324
+
325
+ - **WYSIWYG and source free switching**: Meet different scenario needs — view rendered effects when reading, edit source code when writing
326
+ - **Zero-friction editing**: No need to memorize special shortcuts, one-click menu toggle, auto-save on blur
327
+ - **Fully decoupled plugins**: Each plugin is independently controlled without mutual interference; newly added plugins automatically appear in the menu
328
+
329
+ ---
330
+
331
+ ## Quick Start
332
+
333
+ ### Prerequisites
334
+
335
+ - **Node.js** >= 18
336
+ - **npm** >= 9
337
+
338
+ ### Install & Run
339
+
340
+ ```bash
341
+ # Clone this extended edition repository
342
+ git clone https://github.com/byteuser1977/ColaMD-extend.git
343
+ cd ColaMD-extend
344
+
345
+ # Install dependencies
346
+ npm install
347
+
348
+ # Start in development mode
349
+ npm run dev
350
+ ```
351
+
352
+ ### Build & Package
353
+
354
+ ```bash
355
+ # Build
356
+ npm run build
357
+
358
+ # Package for current platform
359
+ npm run dist
360
+
361
+ # Package for specific platform
362
+ npm run dist:mac # macOS (.dmg)
363
+ npm run dist:win # Windows (.exe)
364
+ npm run dist:linux # Linux (.AppImage / .deb)
365
+ ```
366
+
367
+ ### Download Pre-built Binaries
368
+
369
+ > Check this extended edition's [GitHub Releases](https://github.com/byteuser1977/ColaMD-extend/releases) for the latest builds. Original releases are available at [marswaveai/colamd](https://github.com/marswaveai/colamd/releases).
370
+
371
+ | Platform | Format |
372
+ |----------|--------|
373
+ | macOS | `.dmg` |
374
+ | Windows | `.exe` |
375
+ | Linux | `.AppImage` / `.deb` |
376
+
377
+ ---
378
+
379
+ ## Theme System
380
+
381
+ ColaMD includes **4 built-in themes**, and all renderer plugins automatically adapt to the active theme:
382
+
383
+ | Theme | Identifier | Style Description |
384
+ |-------|-----------|-------------------|
385
+ | **Light** | `theme-light` | Light theme, clean & bright |
386
+ | **Dark** | `theme-dark` | Dark theme, GitHub Dark style |
387
+ | **Elegant** | `theme-elegant` | Elegant theme, warm serif style (**default theme**) |
388
+ | **Newsprint** | `theme-newsprint` | Newsprint style |
389
+
390
+ Custom theme support: Place CSS files in `~/.colamd/themes/` directory, then import via **Theme > Import Theme**. Imported themes persist across sessions.
391
+
392
+ Community-contributed themes can be downloaded from the [`themes/`](themes/) folder.
393
+
394
+ ---
395
+
396
+ ## Technical Architecture
397
+
398
+ ```
399
+ ┌─────────────────────────────────────────────┐
400
+ │ Electron Shell │
401
+ │ ┌──────────┐ ┌───────────┐ ┌───────────┐ │
402
+ │ │ Main │ │ Preload │ │ Renderer │ │
403
+ │ │ Process │──│ IPC Bridge│──│ Process │ │
404
+ │ └──────────┘ └───────────┘ └─────┬─────┘ │
405
+ │ │ │
406
+ │ ┌──────────▼────────┐ │
407
+ │ │ Milkdown Editor │ │
408
+ │ │ (ProseMirror) │ │
409
+ │ │ ┌──────────────┐ │ │
410
+ │ │ │ Plugin System │ │ │
411
+ │ │ │ ├─ 📐 Math │ │ │
412
+ │ │ │ └─ 🔀 Mermaid │ │ │
413
+ │ │ └──────────────┘ │ │
414
+ │ └───────────────────┘ │
415
+ └─────────────────────────────────────────────┘
416
+ ```
417
+
418
+ ### Tech Stack
419
+
420
+ | Technology | Purpose | Version | Documentation |
421
+ |------------|---------|---------|---------------|
422
+ | [Electron](https://www.electronjs.org/) | Cross-platform desktop framework | ^34.0.0 | [📖 Docs](https://www.electronjs.org/docs/latest/) |
423
+ | [Milkdown](https://milkdown.dev/) | WYSIWYG Markdown editor core (ProseMirror-based) | ^7.19.2 | [📖 Docs](https://milkdown.dev/docs) |
424
+ | [ProseMirror](https://prosemirror.net/) | Underlying rich text editing engine | — | [📖 Docs](https://prosemirror.net/docs/) |
425
+ | [KaTeX](https://katex.org/) | Math equation rendering engine | ^0.16.46 | [📖 Docs](https://katex.org/docs/) |
426
+ | [Mermaid.js](https://mermaid.js.org/) | Diagram rendering library | ^11.15.0 | [📖 Docs](https://mermaid.js.org/intro/) |
427
+ | [TypeScript](https://www.typescriptlang.org/) | Type-safe development language | ^5.7.0 | [📖 Docs](https://www.typescriptlang.org/docs/) |
428
+ | [electron-vite](https://electron-vite.org/) | Electron build toolchain | ^3.0.0 | [📖 Docs](https://electron-vite.org/guide/) |
429
+ | [Vite](https://vitejs.dev/) | Underlying build engine | ^6.0.0 | [📖 Docs](https://vitejs.dev/guide/) |
430
+
431
+ > 💡 **Dev Tip**: The official documentation of each library is the best reference for developing new plugins and custom features. In particular, the [KaTeX supported syntax](https://katex.org/docs/supported.html) and [Mermaid diagram syntax](https://mermaid.js.org/intro/syntax-reference.html) are essential for extending plugin capabilities.
432
+
433
+ ### Project Structure
434
+
435
+ ```
436
+ src/
437
+ ├── main/
438
+ │ └── index.ts # Main process: window management, file I/O, menus, file watching
439
+ ├── preload/
440
+ │ └── index.ts # Secure IPC bridge layer
441
+ └── renderer/
442
+ ├── index.html # Entry HTML
443
+ ├── main.ts # Renderer process entry, connects editor and IPC
444
+ ├── editor/
445
+ │ ├── editor.ts # Editor orchestration core (plugin integration)
446
+ │ ├── html-view.ts # HTML inline node view
447
+ │ └── plugins/ # ★ Renderer plugin system
448
+ │ ├── index.ts # Plugin manager (register/query/toggle)
449
+ │ ├── math-plugin.ts
450
+ │ ├── mermaid-plugin.ts
451
+ │ └── *.css # Plugin styles (with multi-theme adaptation)
452
+ └── themes/
453
+ ├── base.css # Base styles
454
+ └── theme-manager.ts # Theme switching manager
455
+ ```
456
+
457
+ ### Design Philosophy
458
+
459
+ The entire project has only **5 runtime dependencies** + **6 dev dependencies**, strictly following the principle of **"If not necessary, do not add entity"**:
460
+
461
+ - No toolbar (users use shortcuts and Markdown syntax)
462
+ - No sidebar or status bar
463
+ - No file management, cloud sync, or collaborative editing
464
+ - Pursue extreme simplicity — each plugin has a single clear responsibility, fully decoupled and independently toggleable
465
+
466
+ ---
467
+
468
+ ## Acknowledgments & Copyright
469
+
470
+ ### Original Project
471
+
472
+ This project is an extended development based on **[marswaveai/ColaMD](https://github.com/marswaveai/colamd)** v1.5.0.
473
+
474
+ **Original Author**: [marswave.ai](https://marswave.ai) (hello@marswave.ai)
475
+
476
+ The original ColaMD is an excellent Agent Native Markdown editor. Its design philosophy of "if not necessary, do not add entity" has profoundly influenced the development philosophy of this project. This extended edition preserves all original features while adding a renderer plugin system to support richer Markdown content expression.
477
+
478
+ ### Third-Party Open Source Libraries
479
+
480
+ This project depends on the following excellent open source projects:
481
+
482
+ | Project | License | Purpose |
483
+ |---------|---------|---------|
484
+ | [Electron](https://github.com/electron/electron) | MIT | Cross-platform desktop framework |
485
+ | [Milkdown](https://github.com/Milkdown/milkdown) | MIT | WYSIWYG Markdown editor core |
486
+ | [ProseMirror](https://github.com/ProseMirror/prosemirror) | MIT | Underlying rich text editing engine |
487
+ | [KaTeX](https://github.com/KaTeX/KaTeX) | MIT | Math equation rendering |
488
+ | [Mermaid.js](https://github.com/mermaid-js/mermaid) | MIT | Diagram rendering |
489
+ | [Vite](https://github.com/vitejs/vite) | MIT | Build tool |
490
+ | [TypeScript](https://github.com/microsoft/TypeScript) | Apache-2.0 | Development language |
491
+
492
+ We thank the authors and maintainers of the above projects for their outstanding contributions to the open source community.
493
+
494
+ ### Open Source License
495
+
496
+ Copyright (c) 2026 [marswave.ai](https://marswave.ai) (Original) | [byteuser1977](https://github.com/byteuser1977) (Extended Edition)
497
+
498
+ Released under the [MIT License](LICENSE) — free and open source forever.
499
+
500
+ > THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
501
+
502
+ ---
503
+
504
+ ## Community & Support
505
+
506
+ ### Related Links
507
+
508
+ | Link | Description |
509
+ |------|-------------|
510
+ | [GitHub Repository (Extended)](https://github.com/byteuser1977/ColaMD-extend) | This extended edition |
511
+ | [GitHub Repository (Original)](https://github.com/marswaveai/colamd) | Original project address |
512
+ | [GitHub Releases (Extended)](https://github.com/byteuser1977/ColaMD-extend/releases) | Download latest extended version |
513
+ | [GitHub Releases (Original)](https://github.com/marswaveai/colamd/releases) | Download original version |
514
+ | [Issues (Extended)](https://github.com/byteuser1977/ColaMD-extend/issues) | Bug reports & suggestions for this edition |
515
+ | [Issues (Original)](https://github.com/marswaveai/colamd/issues) | Bug reports for original project |
516
+ | [marswave.ai](https://marswave.ai) | Official website |
517
+
518
+ ### Contributing
519
+
520
+ You are welcome to participate in the following ways:
521
+
522
+ - **Submit Issues** — Please report bugs or share new feature ideas via GitHub Issues
523
+ - **Pull Request** — Code improvements are welcome, especially new renderer plugins
524
+ - **Theme Contributions** — Create beautiful CSS themes and share them with the community
525
+
526
+ ### Roadmap
527
+
528
+ ColaMD will evolve alongside the agent ecosystem:
529
+
530
+ - ~~v1.1~~ — ✅ Live file reload, file associations, drag & drop, theme system
531
+ - ~~v1.2~~ — ✅ New icon
532
+ - ~~v1.3~~ — ✅ Agent activity indicator, Cmd+click links, rich text copy, smart line breaks, PDF/HTML export, theme persistence
533
+ - ~~v1.4~~ — ✅ Slides: Markdown as Database, HTML template rendering
534
+ - ~~v1.5~~ — ✅ Export Slides: single-file HTML with inlined images
535
+ - **Current Version** — 🆕 Renderer Plugin System: Math equation rendering + Mermaid diagram rendering
536
+ - **Future Plans** — More renderer plugins (syntax highlighting, enhanced flowcharts, etc.), bidirectional sync, multi-file watching
537
+
538
+ ---
539
+
540
+ *Extended from [marswaveai/ColaMD](https://github.com/marswaveai/colamd), built for the agent-native future.*