https://github.com/xiaolinbaba/xiaolin-madopic
Madopic (Markdown to Picture) 精美的 Markdown 转图片工具。让你的知识更有画面感！
https://github.com/xiaolinbaba/xiaolin-madopic
html madopic markdown mermaid png
Last synced: 16 days ago
JSON representation
Madopic (Markdown to Picture) 精美的 Markdown 转图片工具。让你的知识更有画面感！
- Host: GitHub
- URL: https://github.com/xiaolinbaba/xiaolin-madopic
- Owner: xiaolinbaba
- License: mit
- Created: 2025-08-03T11:30:36.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-09-06T05:43:47.000Z (10 months ago)
- Last Synced: 2025-09-06T07:19:27.128Z (10 months ago)
- Topics: html, madopic, markdown, mermaid, png
- Language: JavaScript
- Homepage: https://madopic.thus.chat
- Size: 3.04 MB
- Stars: 117
- Watchers: 1
- Forks: 22
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Madopic
> Madopic (Markdown to Picture) 精美的 Markdown 转图片工具 ✨
一个现代化的在线工具，可以将 Markdown 文本转换为精美的图片海报，特别适合社交媒体分享。
## 项目简介
Madopic 是一个功能丰富的 Markdown 可视化工具，集成了数学公式渲染、图表绘制、多格式导出等强大功能。无论是制作学术海报、技术文档，还是社交媒体内容，都能轻松胜任。
## 主要功能
### 基础功能
1. **Markdown 渲染**：将 Markdown 内容转化为精美图文海报
2. **自定义外观**：可调整背景、字体大小、边距和模式（自由/小红书/朋友圈）
3. **多格式导出**：支持 PNG、PDF 和HTML格式导出
4. **所见即所得**：实时预览，快速导出
5. **图片支持**：本地选择、剪贴板粘贴，Base64 智能管理
6. **信息卡片**：支持好看的信息卡片
### 数学公式渲染
6. **KaTeX 集成**：支持行内公式 `$E=mc^{2}$` 和块级公式 `$$\int_a^b f(x)dx$$`
7. **公式模板库**：内置数学、物理、化学公式模板
8. **符号支持**：希腊字母、积分微分、矩阵等复杂数学符号
### 图表可视化
9. **Mermaid 图表**：流程图、序列图、甘特图、饼图等
10. **ECharts 数据图表**：柱状图、折线图、饼图等数据可视化
11. **一键插入**：丰富的图表模板，快速创建专业图表
### 用户体验
12. **代码块优化**：自动换行，支持长代码行完整显示
13. **预览缩放**：50%～150% 灵活查看
14. **键盘快捷键**：提升编辑效率
15. **智能通知**：操作反馈与错误提示
16. **完全开源**：MIT 协议，免费使用
## 使用场景
### 学术科研
- **学术海报制作**：支持复杂数学公式和专业图表
- **论文图表生成**：流程图、数据可视化
- **教学课件制作**：数学、物理、化学公式展示
- **研究报告可视化**：数据分析结果展示
### 商业应用
- **技术文档制作**：API文档、架构图、流程说明
- **产品功能介绍**：功能流程图、数据展示
- **项目报告**：进度甘特图、统计图表
- **培训材料**：操作流程图、知识图谱
### 社交媒体
- **知识分享**：公式推导、概念解释
- **学习笔记**：思维导图、重点总结
- **技术博客**：代码示例、架构说明
- **创意海报**：精美排版、视觉呈现
## 使用方法
### 基础操作
1. **编写内容**：在左侧编辑器中输入 Markdown 文本
2. **实时预览**：右侧会实时显示渲染效果，包括数学公式和图表
3. **自定义外观**：点击"自定义"按钮调整：
- 背景渐变色彩
- 字体大小（12-32px）
- 内容边距（20-80px）
- 显示模式（自由/小红书3:4/朋友圈长图）
### 数学公式
4. **插入公式**：点击工具栏 🧮 按钮插入数学公式模板
5. **物理公式**：点击 🔬 按钮获取物理公式（牛顿定律、电磁学等）
6. **化学公式**：点击 🧪 按钮插入化学反应方程式
7. **质能守恒**：点击 ⚛️ 按钮快速插入 E=mc²
### 图表绘制
8. **流程图**：点击 🔄 按钮创建 Mermaid 流程图
9. **序列图**：点击 ⏭️ 按钮绘制时序图
10. **甘特图**：点击 📅 按钮制作项目进度图
11. **数据图表**：点击 📊 按钮创建 ECharts 数据可视化
### 导出保存
12. **PNG 导出**：点击"导出PNG"按钮生成高清图片
13. **PDF 导出**：点击"导出PDF"按钮生成矢量文档
14. **HTML 导出**：点击"导出HTML"按钮生成HTML页面
15. **预览缩放**：使用 +/- 按钮调整预览大小（50%-150%）
## 技术栈
### 核心框架
- **前端框架**：原生 HTML/CSS/JavaScript
- **Markdown 解析**：marked.js
- **图片生成**：html2canvas
- **PDF 生成**：jsPDF
### 数学与图表
- **数学公式渲染**：KaTeX + mhchem（化学公式扩展）
- **流程图渲染**：Mermaid.js
- **数据可视化**：Apache ECharts
### UI与交互
- **图标字体**：Font Awesome
- **样式设计**：现代化 CSS Grid/Flexbox/变量
- **响应式设计**：移动端适配
- **PWA支持**：manifest.json 安装元数据
## 技术实现与核心逻辑亮点
### 渲染优化
- **独立导出DOM**：导出时创建隔离节点避免影响预览，确保样式一致性
- **异步渲染管线**：数学公式→图表→ECharts 串行渲染，确保导出完整性
- **ID冲突解决**：为导出节点的Mermaid图表生成唯一ID，避免预览区干扰
- **代码块换行**：移除水平滚动，使用CSS自动换行确保长代码完整显示
### 公式与图表
- **KaTeX集成**：支持mhchem化学扩展，正确处理上标语法 `^{2}`
- **Mermaid渲染**：异步图表生成，支持主题配置和错误处理
- **ECharts可视化**：动态数据图表，响应式尺寸适配
- **模板系统**：内置数学、物理、化学公式和图表模板
### 储与导出
- **Base64管理**：Markdown中短码展示，导出时替换完整数据
- **多格式支持**：PNG位图和PDF矢量双格式导出
- **样式变量化**：CSS变量统一管理，实时预览无重排
- **错误降级**：html2canvas多尺度重试，确保导出成功率
### 用户体验
- **智能预处理**：自动识别公式语法，预处理特殊字符
- **键盘快捷键**：提升编辑效率，支持常用操作
- **响应式设计**：适配多种屏幕尺寸和导出比例
- **通知反馈**：操作状态实时提示，错误信息友好展示
## 本地部署
1. 克隆项目到本地
2. 使用任意HTTP服务器启动
## 更新日志
### 20250906
- 增加导出HTML
- 已知bug修复
### 20250824
- UI调整
- 增加卡片信息
### 20250814
重大功能更新 感谢贡献者 @[southbaird](https://github.com/southbaird)
- **数学公式渲染**：集成KaTeX引擎，支持LaTeX数学公式
- **化学公式支持**：添加mhchem扩展，支持化学反应方程式
- **图表绘制系统**：集成Mermaid，支持流程图、序列图、甘特图等
- **数据可视化**：集成ECharts，支持柱状图、折线图、饼图等
- **PDF导出功能**：新增矢量格式导出，支持高质量打印
- **丰富模板库**：内置数学、物理、化学公式和图表模板
- **扩展工具栏**：新增12个专业功能按钮，快速插入内容
- **功能优化**：UI界面、代码块、表格样式优化及已知BUG修复
### 20250801
- **渲染性能**：优化异步渲染管线，减少阻塞时间
- **错误处理**：完善错误降级机制，提升用户体验
- **代码结构**：模块化重构，提高代码可维护性
## 📄 开源协议
本项目采用 MIT 协议开源。
---
**Madopic 2.0** - 让你的知识更有画面感 🎨✨