Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Madopic (Markdown to Picture) 精美的 Markdown 转图片工具。让你的知识更有画面感!

xiaolinbaba/Madopic

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Madopic

Madopic (Markdown to Picture) 精美的 Markdown 转图片工具 ✨

一个现代化的在线工具,可以将 Markdown 文本转换为精美的图片海报,特别适合社交媒体分享。

项目简介

Madopic 是一个功能丰富的 Markdown 可视化工具,集成了数学公式渲染、图表绘制、多格式导出等强大功能。无论是制作学术海报、技术文档,还是社交媒体内容,都能轻松胜任。

主要功能

基础功能

  1. Markdown 渲染:将 Markdown 内容转化为精美图文海报
  2. 自定义外观:可调整背景、字体大小、边距和模式(自由/小红书/朋友圈)
  3. 多格式导出:支持 PNG、PDF 和HTML格式导出
  4. 所见即所得:实时预览,快速导出
  5. 图片支持:本地选择、剪贴板粘贴,Base64 智能管理
  6. 信息卡片:支持好看的信息卡片

数学公式渲染

  1. KaTeX 集成:支持行内公式 $E=mc^{2}$ 和块级公式 $$\int_a^b f(x)dx$$
  2. 公式模板库:内置数学、物理、化学公式模板
  3. 符号支持:希腊字母、积分微分、矩阵等复杂数学符号

图表可视化

  1. Mermaid 图表:流程图、序列图、甘特图、饼图等
  2. ECharts 数据图表:柱状图、折线图、饼图等数据可视化
  3. 一键插入:丰富的图表模板,快速创建专业图表

用户体验

  1. 代码块优化:自动换行,支持长代码行完整显示
  2. 预览缩放:50%~150% 灵活查看
  3. 键盘快捷键:提升编辑效率
  4. 智能通知:操作反馈与错误提示
  5. 完全开源:MIT 协议,免费使用

使用场景

学术科研

  • 学术海报制作:支持复杂数学公式和专业图表
  • 论文图表生成:流程图、数据可视化
  • 教学课件制作:数学、物理、化学公式展示
  • 研究报告可视化:数据分析结果展示

商业应用

  • 技术文档制作:API文档、架构图、流程说明
  • 产品功能介绍:功能流程图、数据展示
  • 项目报告:进度甘特图、统计图表
  • 培训材料:操作流程图、知识图谱

社交媒体

  • 知识分享:公式推导、概念解释
  • 学习笔记:思维导图、重点总结
  • 技术博客:代码示例、架构说明
  • 创意海报:精美排版、视觉呈现

使用方法

基础操作

  1. 编写内容:在左侧编辑器中输入 Markdown 文本
  2. 实时预览:右侧会实时显示渲染效果,包括数学公式和图表
  3. 自定义外观:点击"自定义"按钮调整:
    • 背景渐变色彩
    • 字体大小(12-32px)
    • 内容边距(20-80px)
    • 显示模式(自由/小红书3:4/朋友圈长图)

数学公式

  1. 插入公式:点击工具栏 🧮 按钮插入数学公式模板
  2. 物理公式:点击 🔬 按钮获取物理公式(牛顿定律、电磁学等)
  3. 化学公式:点击 🧪 按钮插入化学反应方程式
  4. 质能守恒:点击 ⚛️ 按钮快速插入 E=mc²

图表绘制

  1. 流程图:点击 🔄 按钮创建 Mermaid 流程图
  2. 序列图:点击 ⏭️ 按钮绘制时序图
  3. 甘特图:点击 📅 按钮制作项目进度图
  4. 数据图表:点击 📊 按钮创建 ECharts 数据可视化

导出保存

  1. PNG 导出:点击"导出PNG"按钮生成高清图片
  2. PDF 导出:点击"导出PDF"按钮生成矢量文档
  3. HTML 导出:点击"导出HTML"按钮生成HTML页面
  4. 预览缩放:使用 +/- 按钮调整预览大小(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

  • 数学公式渲染:集成KaTeX引擎,支持LaTeX数学公式
  • 化学公式支持:添加mhchem扩展,支持化学反应方程式
  • 图表绘制系统:集成Mermaid,支持流程图、序列图、甘特图等
  • 数据可视化:集成ECharts,支持柱状图、折线图、饼图等
  • PDF导出功能:新增矢量格式导出,支持高质量打印
  • 丰富模板库:内置数学、物理、化学公式和图表模板
  • 扩展工具栏:新增12个专业功能按钮,快速插入内容
  • 功能优化:UI界面、代码块、表格样式优化及已知BUG修复

20250801

  • 渲染性能:优化异步渲染管线,减少阻塞时间
  • 错误处理:完善错误降级机制,提升用户体验
  • 代码结构:模块化重构,提高代码可维护性

📄 开源协议

本项目采用 MIT 协议开源。


Madopic 2.0 - 让你的知识更有画面感 🎨✨

About

Madopic (Markdown to Picture) 精美的 Markdown 转图片工具。让你的知识更有画面感!

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

  •  
  •