Markdown Graph Renderer

Render interactive charts directly from markdown using Chart.js. Write fenced code blocks with chart:<type> language tags and JSON specifications to embed live, responsive charts.

Features

• Multiple chart types: Line, Bar, Pie, Doughnut, Scatter, Histogram, Box Plot
• JSON-driven: Full control via JSON configuration passed in code blocks
• Graceful error handling: Parse errors and Chart.js failures display user-friendly error UI instead of crashing
• Responsive: Charts automatically resize to fit their container
• Interactive: Built on Chart.js 4.4.7 for tooltips, legends, and interactions

Installation

npm

npm install markdown-charts

Peer dependencies (must be installed separately):

npm install marked chart.js

# Only needed for chart:box blocks:
npm install @sgratzl/chartjs-chart-boxplot

CDN (browser, no install)

Load peer deps first, then the renderer:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<!-- optional, only for chart:box -->
<script src="https://cdn.jsdelivr.net/npm/@sgratzl/[email protected]/build/index.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/renderer.js"></script>

Usage

Browser (script tag)

setupMarked(marked);
document.getElementById('output').innerHTML = marked.parse(markdownText);
// Scripts must be re-executed after innerHTML assignment — see src/index.html for pattern

CommonJS (Node.js, webpack 4, Browserify)

const { setupMarked, renderChartBlock } = require('markdown-charts');
const { marked } = require('marked');
setupMarked(marked);
const html = marked.parse(markdownText);

ES Module (Vite, Rollup, webpack 5, Node.js ESM)

import { setupMarked, renderChartBlock } from 'markdown-charts';
import { marked } from 'marked';
setupMarked(marked);
const html = marked.parse(markdownText);

Quick Start

1. Open src/index.html in a browser
2. Write markdown with chart blocks:

## My Chart

\`\`\`chart:line
{
  "title": "Monthly Revenue",
  "xLabel": "Month",
  "yLabel": "Revenue ($k)",
  "data": {
    "labels": ["Jan","Feb","Mar"],
    "datasets": [{
      "label": "Sales",
      "data": [12, 19, 14],
      "borderColor": "#0070f3"
    }]
  }
}
\`\`\`

3. Click "Render" to see the chart

Supported Chart Types

• chart:line — Line chart
• chart:bar — Bar chart
• chart:pie — Pie chart
• chart:doughnut — Doughnut chart
• chart:scatter — Scatter / bubble plot
• chart:hist — Histogram (auto-bins raw data)
• chart:box — Box plot (via chartjs-chart-boxplot plugin)

File Structure

.
├── src/
│   ├── index.html          # Web UI with textarea and render button
│   └── renderer.js         # Chart rendering logic (marked.js extension)
├── docs/
│   └── ARCHITECTURE.md     # Detailed design documentation
├── examples/
│   └── demo.md             # Example chart definitions
└── README.md               # This file

Architecture

renderer.js extends marked.js with a custom code block renderer that:

1. Intercepts fenced code blocks with chart:* language tags
2. Parses the JSON specification
3. Builds a Chart.js config object
4. Generates a <canvas> element + inline <script> tag
5. Wraps Chart instantiation in try-catch for runtime error handling

Error handling includes:

• Parse-time errors: JSON parse failures return graceful error UI
• Runtime errors: Chart.js initialization failures are caught and display user-friendly error messages

Error Handling

When a chart fails to render:

1. Parse errors (invalid JSON): Logs error to console, displays error icon + message
2. Runtime errors (invalid Chart.js config): Catches exception, logs to console, replaces canvas with error UI

All errors are prefixed with [chart-renderer] in the browser console for easy debugging.

Dependencies

• marked.js (v15.0.7) — Markdown parser
• chart.js (v4.4.7) — Canvas charting library
• @sgratzl/chartjs-chart-boxplot (v4.4.4) — Box plot plugin

Development

To modify the renderer:

1. Edit src/renderer.js to change chart generation logic
2. Edit src/index.html to add styles or change the UI
3. Test in browser by opening src/index.html locally

License

See LICENSE file.