Madopic is a client-side web application that converts Markdown content into images (PNG, PDF, HTML) with support for mathematical formulas, diagrams, charts, and custom styling. It operates as a single-page application with a split-screen interface: users write Markdown in the left editor and see a live preview on the right. The application processes Markdown through a pipeline that includes syntax highlighting, formula rendering (via KaTeX/mhchem), diagram rendering (via Mermaid), chart rendering (via ECharts), and custom card syntax, all before updating the preview. The application emphasizes a seamless user experience with real-time previews, customizable themes (background, font size, layout), and multiple export options. It implements sophisticated features like offline image persistence using IndexedDB with an in-memory cache, a protected token system to prevent interference between different Markdown extensions (such as preventing math formula replacements inside code blocks), and exact export cloning to ensure that the exported image matches the preview precisely, including handling of specific aspect ratios for platforms like Xiaohongshu and WeChat Moments. Built with vanilla HTML, CSS, and JavaScript, Madopic relies on several CDN-hosted libraries for its core functionality but maintains a lightweight, dependency-conscious architecture. The application is designed as a progressive web app (PWA) and includes features like local draft autosave, keyboard shortcuts, and responsive design to cater to a wide range of use cases from academic to social media content creation.