A simple chart plugin for Notion, powered by Mermaid.
Notion Charts Extension
Introduction
This extension uses Mermaid syntax, providing convenience for Notion users to easily insert various charts and diagrams in the document.
Instructions
1. Switch between different tabs in the extension page to view different types of charts. Click the copy button in the upper right corner of the chart.
2. In Notion, paste at the position where the charts or diagrams need to be inserted.
3. Switch the code block language in the upper left corner to Mermaid, and use Split mode to display both code and chart.
Supported Charts
1. Pie chart
2. Flow Diagram
3. Sequence Diagram
4. ER Diagram
5. User Journey Diagram
6. Gantt chart
7. Git Diagram
We will continue to optimize and update this extension. If you have any questions and enquiries for optimizations, please click the button on the upper right corner of the extension to join our Slack channel.
Read more
This extension uses Mermaid syntax, providing convenience for Notion users to easily insert various charts and diagrams in the document.
Instructions
1. Switch between different tabs in the extension page to view different types of charts. Click the copy button in the upper right corner of the chart.
2. In Notion, paste at the position where the charts or diagrams need to be inserted.
3. Switch the code block language in the upper left corner to Mermaid, and use Split mode to display both code and chart.
Supported Charts
1. Pie chart
2. Flow Diagram
3. Sequence Diagram
4. ER Diagram
5. User Journey Diagram
6. Gantt chart
7. Git Diagram
We will continue to optimize and update this extension. If you have any questions and enquiries for optimizations, please click the button on the upper right corner of the extension to join our Slack channel.
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "name": "Notion Charts", "description": "A simple chart plugin for Notion, powered by Mermaid.", "version": "0.2.1", "manifest_version": 3, "action": { "default_popup": "popup.html" }, "icons": { "16": "logo16.png", "32": "logo32.png", "48": "logo48.png", "128": "logo128.png" }, "background": { "service_worker": "./static/js/background.js" }, "web_accessible_resources": [{ "resources": [], "matches": [""] }], "permissions": [ "storage" ]}
Read more