Dṛśyam (Sanskrit: दृश्यम्) — A zero-dependency, ultra-lightweight diagram viewer. Drop any file and explore it with smooth infinite pan, zoom, and high-resolution export.
- 🚀 Zero Install, Zero Build — A single-file core that works directly from your filesystem.
- 🎨 Universal Viewer — Native support for
.svgand Mermaid syntax (.mmd,.mermaid). - 🔍 Pro-Grade Navigation — Smooth D3-powered pan and zoom ranging from
0.01×to20×. - 📱 PWA Native — Install it as a standalone app on iOS, Android, or Desktop.
- 🛠 Mermaid Editor — Built-in editor with live preview, line numbers, and syntax error linting.
- 💾 High-Res Export — Save your work as clean SVGs or high-density PNGs.
- 🔒 Security First — Hardened with DOMPurify to prevent XSS from untrusted SVG files.
- 🌓 Adaptive UI — Modern glassmorphism interface with persistent dark-mode settings.
| Core | Navigation | Rendering | Security |
|---|---|---|---|
| Vanilla JS | D3.js v7 | Mermaid.js v10 | DOMPurify |
| PWA Service Worker | CSS3 Glassmorphism | Lucide Icons | LocalStorage API |
Simply open index.html in any modern web browser.
# macOS/Linux
open index.html
# Windows
start index.htmlFor the best experience with Service Workers and PWA features, serve the folder:
npx serve .
# or
python -m http.server 8080| Key | Action |
|---|---|
| F | Fit to screen — Auto-scale diagram to viewport |
| R | Reset zoom — Snap back to 100% scale |
| E | Toggle Editor — Show/Hide the Mermaid editor |
| + / - | Zoom Control — Zoom in or out incrementally |
| Ctrl + Enter | Render — Execute Mermaid code from editor |
drishyam/
├── index.html # The Core Application
├── icon.svg # Vector Source Logo
├── manifest.json # PWA Configuration
├── sw.js # Service Worker (Offline Support)
├── appstore-images/ # Platform-specific Icon Assets
└── README.md # The DocumentationDṛśyam (Devanagari: दृश्यम्) means "that which is seen" or "the object of vision". The logo traces the Devanagari glyph दृ (Dṛ) as a single continuous stroke, representing the seamless flow of architectural ideas from code to vision.
Dṛśyam uses a centralized versioning system managed by the Service Worker. To push an update to all installed PWA instances:
- Open
sw.js. - Update the
VERSIONconstant at the top of the file using the Evergreen format (YY.M.U), e.g.,const VERSION = "26.5.2";. - Deploy the changes.
The app will automatically detect the change, notify users with a "Update Available" toast, and show an update button in the More menu. The UI version indicator and cache management are all driven by this single variable.
Distributed under the MIT License. See LICENSE for more information.