{"id":43699895,"url":"https://github.com/xiaolinbaba/xiaolin-madopic","last_synced_at":"2026-07-01T13:01:57.705Z","repository":{"id":307984331,"uuid":"1031265922","full_name":"xiaolinbaba/Madopic","owner":"xiaolinbaba","description":"Madopic (Markdown to Picture) 精美的 Markdown 转图片工具。让你的知识更有画面感！","archived":false,"fork":false,"pushed_at":"2025-09-06T05:43:47.000Z","size":3191,"stargazers_count":117,"open_issues_count":2,"forks_count":22,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-06T07:19:27.128Z","etag":null,"topics":["html","madopic","markdown","mermaid","png"],"latest_commit_sha":null,"homepage":"https://madopic.thus.chat","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xiaolinbaba.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-03T11:30:36.000Z","updated_at":"2025-09-06T05:43:07.000Z","dependencies_parsed_at":"2025-08-24T10:19:50.405Z","dependency_job_id":"21f2a33c-76ca-4c84-98d2-3715c39210b3","html_url":"https://github.com/xiaolinbaba/Madopic","commit_stats":null,"previous_names":["xiaolinbaba/madopic"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/xiaolinbaba/Madopic","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaolinbaba%2FMadopic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaolinbaba%2FMadopic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaolinbaba%2FMadopic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaolinbaba%2FMadopic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xiaolinbaba","download_url":"https://codeload.github.com/xiaolinbaba/Madopic/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaolinbaba%2FMadopic/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29113188,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-05T03:44:17.043Z","status":"ssl_error","status_checked_at":"2026-02-05T03:44:12.077Z","response_time":65,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","madopic","markdown","mermaid","png"],"created_at":"2026-02-05T05:00:20.722Z","updated_at":"2026-07-01T13:01:57.698Z","avatar_url":"https://github.com/xiaolinbaba.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Madopic\n\n\u003e Madopic (Markdown to Picture) 精美的 Markdown 转图片工具 ✨\n\n![madopic.png](https://pic4.zhimg.com/v2-a342a311176f76e4120b7084d9f18db3_r.jpg)\n\n一个现代化的在线工具，可以将 Markdown 文本转换为精美的图片海报，特别适合社交媒体分享。\n\n## 项目简介\n\nMadopic 是一个功能丰富的 Markdown 可视化工具，集成了数学公式渲染、图表绘制、多格式导出等强大功能。无论是制作学术海报、技术文档，还是社交媒体内容，都能轻松胜任。\n\n\n\n## 主要功能\n\n### 基础功能\n1. **Markdown 渲染**：将 Markdown 内容转化为精美图文海报\n2. **自定义外观**：可调整背景、字体大小、边距和模式（自由/小红书/朋友圈）\n3. **多格式导出**：支持 PNG、PDF 和HTML格式导出\n4. **所见即所得**：实时预览，快速导出\n5. **图片支持**：本地选择、剪贴板粘贴，Base64 智能管理\n6. **信息卡片**：支持好看的信息卡片\n\n### 数学公式渲染\n6. **KaTeX 集成**：支持行内公式 `$E=mc^{2}$` 和块级公式 `$$\\int_a^b f(x)dx$$`\n7. **公式模板库**：内置数学、物理、化学公式模板\n8. **符号支持**：希腊字母、积分微分、矩阵等复杂数学符号\n\n### 图表可视化\n9. **Mermaid 图表**：流程图、序列图、甘特图、饼图等\n10. **ECharts 数据图表**：柱状图、折线图、饼图等数据可视化\n11. **一键插入**：丰富的图表模板，快速创建专业图表\n\n### 用户体验\n12. **代码块优化**：自动换行，支持长代码行完整显示\n13. **预览缩放**：50%～150% 灵活查看\n14. **键盘快捷键**：提升编辑效率\n15. **智能通知**：操作反馈与错误提示\n16. **完全开源**：MIT 协议，免费使用\n\n## 使用场景\n\n### 学术科研\n- **学术海报制作**：支持复杂数学公式和专业图表\n- **论文图表生成**：流程图、数据可视化\n- **教学课件制作**：数学、物理、化学公式展示\n- **研究报告可视化**：数据分析结果展示\n\n### 商业应用\n- **技术文档制作**：API文档、架构图、流程说明\n- **产品功能介绍**：功能流程图、数据展示\n- **项目报告**：进度甘特图、统计图表\n- **培训材料**：操作流程图、知识图谱\n\n### 社交媒体\n- **知识分享**：公式推导、概念解释\n- **学习笔记**：思维导图、重点总结\n- **技术博客**：代码示例、架构说明\n- **创意海报**：精美排版、视觉呈现\n\n## 使用方法\n\n### 基础操作\n1. **编写内容**：在左侧编辑器中输入 Markdown 文本\n2. **实时预览**：右侧会实时显示渲染效果，包括数学公式和图表\n3. **自定义外观**：点击\"自定义\"按钮调整：\n   - 背景渐变色彩\n   - 字体大小（12-32px）\n   - 内容边距（20-80px）\n   - 显示模式（自由/小红书3:4/朋友圈长图）\n\n### 数学公式\n4. **插入公式**：点击工具栏 🧮 按钮插入数学公式模板\n5. **物理公式**：点击 🔬 按钮获取物理公式（牛顿定律、电磁学等）\n6. **化学公式**：点击 🧪 按钮插入化学反应方程式\n7. **质能守恒**：点击 ⚛️ 按钮快速插入 E=mc²\n\n### 图表绘制\n8. **流程图**：点击 🔄 按钮创建 Mermaid 流程图\n9. **序列图**：点击 ⏭️ 按钮绘制时序图\n10. **甘特图**：点击 📅 按钮制作项目进度图\n11. **数据图表**：点击 📊 按钮创建 ECharts 数据可视化\n\n### 导出保存\n12. **PNG 导出**：点击\"导出PNG\"按钮生成高清图片\n13. **PDF 导出**：点击\"导出PDF\"按钮生成矢量文档\n14. **HTML 导出**：点击\"导出HTML\"按钮生成HTML页面\n15. **预览缩放**：使用 +/- 按钮调整预览大小（50%-150%）\n\n## 技术栈\n\n### 核心框架\n- **前端框架**：原生 HTML/CSS/JavaScript\n- **Markdown 解析**：marked.js\n- **图片生成**：html2canvas\n- **PDF 生成**：jsPDF\n\n### 数学与图表\n- **数学公式渲染**：KaTeX + mhchem（化学公式扩展）\n- **流程图渲染**：Mermaid.js\n- **数据可视化**：Apache ECharts\n\n### UI与交互\n- **图标字体**：Font Awesome\n- **样式设计**：现代化 CSS Grid/Flexbox/变量\n- **响应式设计**：移动端适配\n- **PWA支持**：manifest.json 安装元数据\n\n## 技术实现与核心逻辑亮点\n\n### 渲染优化\n- **独立导出DOM**：导出时创建隔离节点避免影响预览，确保样式一致性\n- **异步渲染管线**：数学公式→图表→ECharts 串行渲染，确保导出完整性\n- **ID冲突解决**：为导出节点的Mermaid图表生成唯一ID，避免预览区干扰\n- **代码块换行**：移除水平滚动，使用CSS自动换行确保长代码完整显示\n\n### 公式与图表\n- **KaTeX集成**：支持mhchem化学扩展，正确处理上标语法 `^{2}` \n- **Mermaid渲染**：异步图表生成，支持主题配置和错误处理\n- **ECharts可视化**：动态数据图表，响应式尺寸适配\n- **模板系统**：内置数学、物理、化学公式和图表模板\n\n### 储与导出\n- **Base64管理**：Markdown中短码展示，导出时替换完整数据\n- **多格式支持**：PNG位图和PDF矢量双格式导出\n- **样式变量化**：CSS变量统一管理，实时预览无重排\n- **错误降级**：html2canvas多尺度重试，确保导出成功率\n\n### 用户体验\n- **智能预处理**：自动识别公式语法，预处理特殊字符\n- **键盘快捷键**：提升编辑效率，支持常用操作\n- **响应式设计**：适配多种屏幕尺寸和导出比例\n- **通知反馈**：操作状态实时提示，错误信息友好展示\n\n\n## 本地部署\n\n1. 克隆项目到本地\n2. 使用任意HTTP服务器启动\n\n## 更新日志\n\n### 20250906\n- 增加导出HTML\n- 已知bug修复\n\n### 20250824\n- UI调整\n- 增加卡片信息\n\n### 20250814\n\n重大功能更新 感谢贡献者 @[southbaird](https://github.com/southbaird)\n- **数学公式渲染**：集成KaTeX引擎，支持LaTeX数学公式\n- **化学公式支持**：添加mhchem扩展，支持化学反应方程式\n- **图表绘制系统**：集成Mermaid，支持流程图、序列图、甘特图等\n- **数据可视化**：集成ECharts，支持柱状图、折线图、饼图等\n- **PDF导出功能**：新增矢量格式导出，支持高质量打印\n- **丰富模板库**：内置数学、物理、化学公式和图表模板\n- **扩展工具栏**：新增12个专业功能按钮，快速插入内容\n- **功能优化**：UI界面、代码块、表格样式优化及已知BUG修复\n\n### 20250801\n- **渲染性能**：优化异步渲染管线，减少阻塞时间\n- **错误处理**：完善错误降级机制，提升用户体验\n- **代码结构**：模块化重构，提高代码可维护性\n\n## 📄 开源协议\n\n本项目采用 MIT 协议开源。\n\n---\n\n**Madopic 2.0** - 让你的知识更有画面感 🎨✨","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaolinbaba%2Fxiaolin-madopic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxiaolinbaba%2Fxiaolin-madopic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaolinbaba%2Fxiaolin-madopic/lists"}