filbeodkchmlhlpaehaoabocfgldceao
SparkChart for PlantUML and Mermaid rendering in the browser. Create, visualize, and edit diagrams with AI assistance. SparkChart: The Ultimate Text-to-Diagram Workspace SparkChart is a lightweight, high-performance extension for developers, architects, and technical writers who want to build professional diagrams without the friction of drag-and-drop tools. By treating "Diagrams as Code," SparkChart allows you to render complex visualizations instantly using industry-standard syntax. PlantUML: Create robust, UML-compliant sequence diagrams with a dedicated live editor and real-time preview. Mermaid.js: Full support for all Mermaid charts, including Flowcharts, Gantt charts, Entity Relationship Diagrams (ERD), Mind Maps, and User Journeys. Live Rendering: Watch your diagrams update in real-time as you type your code. Professional Templates: Kickstart your project with built-in snippets for common architectural patterns. High-Quality Export: Save your work as SVG or PNG files for seamless integration into GitHub, Jira, Notion, or your internal documentation. Privacy-First: Your diagram code stays in your browser. No external accounts or cloud storage required. ## Future-Ready with Local AI SparkChart is built for the next generation of web browsing. We have integrated a powerful AI assistant designed to generate diagrams from natural language prompts and automatically refactor your chart logic. Note: These AI features are currently deactivated. They will be automatically enabled as soon as Google Chrome rolls out official support for Gemini Nano (Built-in AI) on your device. This ensures the AI runs entirely locally on your machine, keeping your data 100% private. Stop drawing. Start coding. Ignite your documentation with SparkChart.
Mermaid Previewer
Preview and export mermaid. A chrome extension for previewing and exporting mermaid images in web pages, fully rendering mermaid locally without involving remote api calls. On websites that meet the preset rules, you can preview or export by setting the code block language in markdown to mermaid: ```mermaid graph LR A --> B ``` At the same time, it also provides the function of custom rule configuration. Please click on the website on the right to view the source code repository for more information.
Simple Mermaid Preview
Mermaid diagram viewer and renderer for Chrome. Simple Mermaid Preview automatically detects and renders Mermaid diagrams — flowcharts, sequence diagrams and other diagrams Works on AI chat tools, code repositories, wikis, note-taking apps, and any blog or documentation site that embeds Mermaid code blocks. ────────────────────────────── FEATURES ────────────────────────────── 🌐 Allowed Sites manager — add/remove domains for auto-render (with explicit permission prompt) 🖼️ Live rendering of Mermaid code blocks into visual charts 🔎 Pan & zoom — drag to explore large diagrams, pinch to zoom, one-click reset 🔀 Toggle between rendered diagram and raw Mermaid source code per diagram 🎛️ Global on/off switch and auto-render toggle in the popup 🔒 100% local rendering — uses bundled Mermaid.js, no internet connection required ────────────────────────────── WHY INSTALL THIS? ────────────────────────────── AI assistants frequently output Mermaid diagrams as raw code which saves you token than other output. Without a renderer, you see walls of text instead of the actual diagram. Simple Mermaid Preview fixes this — the diagram renders right inside the chat, no copy-pasting to mermaid.live or any external tool needed. Developers reading pull requests, wikis, or documentation pages with embedded Mermaid diagrams also benefit — every diagram renders inline, instantly. ────────────────────────────── PERMISSIONS MODEL ────────────────────────────── By default, the extension auto-renders on: - https://chat.openai.com/* - https://chatgpt.com/* - https://claude.ai/* - https://gemini.google.com/* ────────────────────────────── PRIVACY ────────────────────────────── 🚫 No data collection. No external servers. No account required. The extension stores only two preference toggles (enabled / auto-render) in chrome.storage.sync on your own Google account. All diagram rendering happens locally in your browser.
PlantUML for GitHub
Renders plantuml code blocks directly on GitHub pages using the client-side TeaVM-compiled PlantUML engine. PlantUML for GitHub A Chrome extension that renders "plantuml" code blocks directly on GitHub pages, using the TeaVM-compiled PlantUML engine that runs entirely client-side. Hosted at https://github.com/plantuml/plantuml-for-github 1. The extension's content script scans every GitHub page for "plantuml" code blocks. 2. Each block is replaced with a sandboxed "" packaged inside the extension. 3. The iframe loads the TeaVM-compiled "plantuml.js" engine and renders the diagram to SVG. 4. The result is displayed inline in the page, inside a small wrapper with a header bar. 5. The header bar shows a toggle button (top-left of the wrapper) that switches between the rendered diagram and the original PlantUML source. The source view uses GitHub's own syntax highlighting, so it looks exactly as it would without the extension installed. This is the same architecture GitHub already uses for Mermaid — proving that client-side PlantUML can be integrated natively with zero infrastructure cost. SECURITY AND PERMISSIONS Minimal Permissions: It requires no host permissions, storage, or tabs API. The only declared permission is clipboardWrite, which is strictly used to power the user-triggered "Copy as Bitmap" button, allowing the generated diagram to be copied directly to the clipboard. One thing worth calling out is the extension's Content Security Policy. The Manifest V3 default CSP for extension pages is essentially "script-src 'self'", which blocks WebAssembly. We need to relax it slightly to enable WebAssembly. Why? PlantUML renders sequence diagrams directly to SVG, but anything that needs graph layout — class, component, deployment, state, use-case, and activity diagrams — is laid out by the embedded Graphviz engine, which ships as a WebAssembly module (viz-global.js). Instantiating that module requires the 'wasm-unsafe-eval' CSP source. 'wasm-unsafe-eval' is a narrowly scoped directive: despite the scary name, it ONLY allows WebAssembly compilation and instantiation. It does NOT re-enable "eval()" or "new Function()" — those remain blocked. No remote scripts can be loaded either; "script-src 'self'" still applies. Google documents this directive as the supported way to ship WASM in MV3 extensions. In short: the engine runs entirely inside a sandboxed iframe with an opaque origin, with no network access and no shared state with the host page. - [x] MVP: detect and render plantuml blocks - [x] Firefox support (Manifest V3 is now supported in Firefox) - [x] "Copy as Bitmap" buttons - [x] Theme matching (light/dark) — follows GitHub's color mode - [x] Support puml and wsd language aliases - [ ] Options page (toggle, performance settings) - [x] Chrome Web Store publication PlantUML support on GitHub has been requested for 4+ years: https://github.com/orgs/community/discussions/10111 The main blocker was performance and infrastructure cost. With the TeaVM-compiled engine, that blocker no longer exists. This extension demonstrates that PlantUML can run natively on GitHub.com with zero server-side changes — using the exact same sandbox pattern GitHub uses for Mermaid. If you'd like to see this integrated natively, please upvote the discussion: https://github.com/orgs/community/discussions/10111 Source code: https://github.com/plantuml/plantuml-for-github Discussion: https://github.com/orgs/community/discussions/10111
PlantUML to Mermaid Converter
PlantUML to Mermaid Converter is a user-friendly Chrome extension designed to help developers, designers, and project managers effortlessly convert PlantUML diagrams into Mermaid format. Whether you're creating flowcharts, sequence diagrams, or class diagrams, this tool makes your diagram conversion more efficient. Key Features: Support for Multiple Diagram Types: Sequence Diagram, Class Diagram. Simple User Interface: Just select the diagram type, paste your PlantUML code, and get the corresponding Mermaid code instantly. Real-time Conversion: Click the convert button, and the Mermaid code is generated immediately, ready for use in Markdown, documentation, or other tools. Boost Efficiency: Say goodbye to tedious manual conversions and focus on design and development tasks. Use Cases: Developers: Present system designs and workflows more intuitively in documentation. Project Managers: Convert project flowcharts into a more understandable format for team members. Designers: Easily transform class diagrams into more visually appealing Mermaid diagrams. How to Use: After installing the extension, click the extension icon in the top-right corner of your browser to open the converter. Choose the diagram type you need to convert ( Sequence Diagram, Class Diagram,OR State Diagram). Paste your PlantUML code into the input box. Click the "Convert" button to instantly generate the Mermaid code. Copy the generated Mermaid code for use in your documents or visualization tools. Why Choose Us: No Ads, No Tracking: We respect your privacy—this extension is completely ad-free and does not collect any user data. Open Source & Regular Updates: We're committed to providing the best experience, with regular updates and feature improvements. Lightweight: The extension is small, efficient, and won’t impact your browser’s performance. Frequently Asked Questions: What PlantUML syntax is supported? The extension currently supports conversion for sequence diagrams, and class diagrams. More PlantUML features will be supported in future updates. What should I do if I encounter issues during conversion? If you experience any problems or have suggestions, please reach out to us via the developer contact page—we'll respond as soon as possible. Feedback & Support: If you enjoy this extension, please consider giving us a 5-star rating! Your support motivates us to keep improving. For any issues or suggestions, please contact us through the Chrome Web Store support option.
