Markdown to Infographic

A Markdown-native visual compiler. It parses your Markdown into a semantic model, detects information patterns such as ordered steps, dates, numeric metrics, and comparison tables, and lays them out as an infographic. There is no prompt and no generative image model: Markdown stays the source of truth, and the same Markdown with the same settings always produces the same result.

1. 1.Write or paste Markdown, upload a .md or .txt file (up to 1 MB, or drop it onto the editor), or load one of the complete examples.
2. 2.Keep Auto layout or choose Overview, Bento, Process, Timeline, Comparison, Dashboard, Cheat sheet, Hierarchy, or Technical explainer.
3. 3.Pick a theme, canvas size, and density. Layout and theme are independent.
4. 4.Click a block in the preview to jump to its Markdown, or move the editor cursor to highlight the block.
5. 5.Export SVG or PNG at 1×, 2×, or 3×. For long content, use a long infographic or split it into a carousel.

• •H1 becomes the title; the paragraph or quote right after it becomes the lead.
• •H2 headings become sections; H3 and deeper become labels inside a section. Documents that use H1 for every chapter (like many PRDs) get H1 sections with H2 labels instead.
• •Ordered lists become steps; dated items such as "2024 —" or "14:02 UTC —" become timeline entries.
• •Lists of "Label: value" pairs become metric tiles, and numeric table columns get proportional bars.
• •Blockquotes become pull quotes (with an "— Author" line styled apart). GitHub alerts, Obsidian callouts (with titles), Docusaurus :::admonitions, and <details> become toned callouts.
• •"Key: value" lines, Key: metadata, and definition lists become a facts grid; metadata under the title becomes chips.
• •Lists that start every item with an emoji become icon lists (✅/❌ get pro/con tones), and a heading emoji becomes the section icon.
• •Code is syntax highlighted; $$math$$ shows as a formula; ==text== and <mark> highlight; README badges become chips.
• •In carousel mode, --- starts a new page.

Use the Structure panel to hide sections you do not want in the infographic; your Markdown is not changed. For very long documents, the Outline density keeps the first lines of each section and counts the rest ("+5 more"). Outline is clearly labelled as not lossless and is never the default.

Text, numbers, units, links, and ordering are never rewritten or summarized. When content does not fit, the tool first scales text down to a minimum readable size, then tells you and suggests a long infographic, a carousel, or compact density instead of hiding content. Parsing, layout, and export run in your browser, and documents autosave locally with IndexedDB.

Mermaid diagrams are shown as source code, and images appear as labeled placeholders so nothing is fetched from the network. PDF export and AI-assisted condensing are not available. Text uses system fonts, so an exported SVG can look slightly different on a computer with different fonts installed.