Text-to-SVG Diagrams for Excel

English | 日本語

An Office Add-in that creates diagrams using Mermaid syntax and inserts them as images into Excel sheets.

Quickly draw flowcharts, sequence diagrams, ER diagrams, and more using text-based notation, then insert them as PNG/JPEG/SVG images into the active sheet. All processing happens locally — your input is never sent to external servers.

Landing page and install guide: https://msmsrep.github.io/TextToSvgDiagramsForExcel/?lang=en

This is an unofficial tool and is not affiliated with the Mermaid project. It was formerly named "Mermaid for Excel"; see docs/migration.md for moving from the old name.

Key Features

• Real-time preview — The diagram is rendered automatically in the task pane as you type Mermaid syntax. On a syntax error, the offending line is highlighted in the editor and [Go to line N] jumps to it
• Insert into Excel — Insert the previewed image at the active cell with one click
• Re-editing — The Mermaid code is stored in the inserted image's alt text; select the diagram on the sheet (or pick it from [Diagram]) to load it back, then edit and replace it. If the editor has unsaved code, you are asked before it is replaced
• Diagrams ribbon tab — Start new diagrams, insert and download from the Diagrams tab; the task pane keeps just the editor, preview and output settings
• Templates — Pick a diagram type from Diagrams > Template to start from a short example (flowchart, sequence, class, state, ER, Gantt, pie, mindmap, timeline)
• Code from selected cells — Select a table and pick a type from Diagrams > From cells to get flowchart (parent | child | label), Gantt (task | start | end or days | section) or pie chart (label | value) code
• PNG / JPEG / SVG output — Choose your output format and download the image directly
• Output size — Set the size as a scale (50–200%) or a width in points. When replacing a diagram, Keep current size (on by default) keeps its width on the sheet
• Editable shapes (experimental) — Insert a flowchart as native Excel shapes and connectors (Shapes (editable)), or as an SVG simplified for Excel's Convert to Shape (SVG (for shape conversion)), so people without the add-in can edit it
• Wide diagram support — All diagram types supported by Mermaid are available, including flowcharts, sequence diagrams, class diagrams, ER diagrams, and Gantt charts
• Privacy-friendly — All processing is completed within the task pane; no data is sent to external servers

Project Structure

TextToSvgDiagramsForExcel/
  build.js                 ← esbuild build script (build / dev / watch / serve / engine)
  manifest.xml             ← Office Add-in manifest
  package.json
  tsconfig.json
  assets/                  ← Icon directory
  scripts/sync-version.js  ← Syncs the package.json version to the manifest, installer and desktop app
  site/index.html          ← Landing page served at the GitHub Pages root (includes install guide)
  src/core/                ← Code shared by the add-in and the desktop app
    render.ts              ← Mermaid rendering
    image.ts               ← SVG → PNG/JPEG conversion
    officeSvg.ts           ← SVG simplified for Excel's Convert to Shape
    flowchartModel.ts      ← Flowchart SVG → Excel shape model
    svgUtil.ts             ← Matrix and color helpers
    tableToMermaid.ts      ← Table → Mermaid code
    templates.ts           ← Starting code for each diagram type
    errorLine.ts           ← Maps a render error to the editor line
    messages.ts            ← Shared messages (English and Japanese)
  src/taskpane/            ← Add-in only
    taskpane.html / .css
    taskpane.ts            ← UI wiring (entry point)
    excelShapes.ts         ← Excel shape insert / replace / list
    excelTable.ts          ← Reads the selected cells
    ribbon.ts              ← Diagrams tab commands (shared runtime)
    splitter.ts            ← Editor / preview splitter
    lineHighlight.ts       ← Highlights a line of the editor
  src/engine/              ← The desktop app's rendering engine (a page run in WebView2)
  desktop/                 ← Desktop app (WPF); see docs/desktop-design.md
    src/                   ← The app
    tests/                 ← xUnit tests
    package/               ← MSIX manifest, images and packaging script (pack.ps1)
  samples/                 ← Sample workbook for manual testing
  test/                    ← Vitest tests (Office.js, mermaid and Canvas are mocked)
  dist/                    ← Build output (not committed; deployed by GitHub Actions)

Setup

cd TextToSvgDiagramsForExcel
npm install

# Install development HTTPS certificate (first time only, requires admin privileges)
npx office-addin-dev-certs install

Starting the Development Server

npm run dev-server
# → https://localhost:3000/taskpane.html

To sideload and debug, run npm start while the development server is running.

Registering the Add-in in Excel

1. Open Excel
2. [Insert] → [Add-ins] → [My Add-ins] → [Upload My Add-in]
3. Select dist/manifest.xml (built with npm run build:dev when using the development server)

An [Open Text-to-SVG] button will be added to the Home tab.

以上為 README 的開頭部分。其餘內容請閱讀原文。 檢視完整 README ↗