DocPrism

A documentation review tool that renders Markdown with Mermaid diagrams, inline comments, and git diff — built with Electron + React.

DocPrism treats a document like a prism: each face is a different way of seeing it — preview (rendered Markdown), diff (side-by-side git revisions), and comments (inline review annotations).

Features

• Markdown preview with syntax highlighting (highlight.js)
• Mermaid diagrams — rendered locally with zoom, pan, and fullscreen
• PlantUML blocks — source preserved for future local rendering
• Git diff — compare any two revisions of a file side by side
• Inline comments — select text or a diagram region and annotate; persists in .viewercomments.json sidecar files
• Export review — bundle all comments into a portable Markdown report
• File tree sidebar — navigate project documentation with nested directories
• Live reload — file changes on disk refresh the preview automatically
• Web mode — browse docs via browser with npm run dev:web -- /path/to/docs (open any file from disk, no server root restriction)
• Electron packaging for AppImage, .deb (Linux), DMG (macOS), and NSIS (Windows)

Install

Download the latest release from GitHub Releases:

Platform	Installer
Linux	DocPrism-*.AppImage or docprism_*.deb
macOS	DocPrism-*.dmg
Windows	DocPrism-*.exe

Quick start

# Open a directory (Electron)
npx docprism /path/to/docs

# Open a directory (web — browser at http://localhost:5173)
npm run dev:web -- /path/to/docs

# Production web server (requires npm run build first)
npm start /path/to/docs

Development

git clone https://github.com/fedenunez/docprism.git
cd docprism
npm install

# Run tests
npm test

# Electron dev mode
npm run dev

# Web dev mode with a doc root
npm run dev:web -- ./docs

# Package the app
npm run dist

How it works

DocPrism reads a directory of Markdown files, renders them in an Electron or browser window, and lets you:

1. Preview — Markdown is parsed with marked and highlighted with highlight.js. Mermaid code fences are rendered into SVG inline. PlantUML blocks are preserved as placeholders.

2. Diff — select any two git revisions from the dropdown to see changes side by side.

3. Comment — select text in the preview or a region in a diagram to add an annotation. Comments are stored in .filename.viewercomments.json beside the source file.

4. Export — bundle all comments for a file into a portable Markdown report in your system temp directory.

Architecture

src/          React renderer (ESM)
electron/     Electron main + preload (CJS)
server/       Express + WebSocket server for web mode (CJS)
shared/       Business logic shared by Electron and server (CJS)
scripts/      Dev launchers and after-pack hooks (CJS)

Renderer code never imports Electron or Node directly — it communicates through window.desktopApi, which is injected by electron/preload.cjs (desktop) or src/api/http-bridge.js (web).

License

MIT — built by fedenunez with opencode.