Native support for Mermaid diagrams

[Cossackx]

Problem to Solve I’m always frustrated when I can’t create or view Mermaid diagrams directly within OneNote. As a user who frequently uses Mermaid for visualizing complex information, having to switch between different tools to create and then import diagrams disrupts my workflow and reduces productivity.

New Feature/Solution I would like the OneMore add-in to support Mermaid syntax natively. This would allow users to create, edit, and view Mermaid diagrams directly within OneNote, enhancing the note-taking and visualization capabilities of the application.

Alternative Solutions External Tools Integration: Allow integration with external tools like Obsidian or online Mermaid editors, where diagrams can be created and then imported into OneNote as images. Markdown Support: Enhance the Markdown support in OneMore to include Mermaid syntax, enabling users to write and render diagrams within their notes. Third-Party Add-ins: Explore existing third-party add-ins that might already support Mermaid and see if they can be integrated with OneMore. Additional Context Mermaid diagrams are widely used for creating flowcharts, sequence diagrams, Gantt charts, and more. Integrating this feature would significantly benefit users who rely on visual aids for organizing and presenting information. Below is an example of a Mermaid diagram that I would like to create directly within OneNote:

%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#1f77b4', 'edgeLabelBackground':'#f0f0f0', 'clusterBkg':'#f0f0f0', 'clusterBorder':'#1f77b4', 'defaultLinkColor':'#1f77b4', 'fontColor': '#cccccc', 'labelTextColor': '#cccccc'}}}%% mindmap root((Develop a Balanced Routine)) subgraph Define Your Personal Brand Core Value 1 Core Value 2 Core Value 3 end subgraph Incorporate Stress-Management Practices Practice 1: Meditation Practice 2: Deep-Breathing Allocate Time: 10-15 mins end subgraph Set Small, Achievable Goals Task 1 Task 2 Daily Goal Setting end subgraph Reflect and Adjust What Worked What Didn’t Emotional Check-In end

Recommendations for Implementing Mermaid Diagrams in OneMore

1. Integrate Mermaid.js Library Description: Integrate the Mermaid.js library into the OneMore add-in to enable rendering of Mermaid diagrams directly within OneNote. Steps: Include the Mermaid.js library in the add-in’s codebase. Create a function to parse Mermaid syntax and render the diagrams using Mermaid.js. Add a button or menu option in OneNote to insert Mermaid diagrams.

2. Enhance Markdown Support Description: Extend the existing Markdown support in OneMore to include Mermaid syntax. Steps: Update the Markdown parser to recognize and process Mermaid code blocks. Use the Mermaid.js library to render the diagrams within the Markdown content. Ensure that the rendered diagrams are interactive and can be edited directly within OneNote.

3. Provide a User-Friendly Interface Description: Develop a user-friendly interface for creating and editing Mermaid diagrams. Steps: Create a dedicated editor window or pane within OneNote for writing Mermaid syntax. Include syntax highlighting and auto-completion features to assist users in writing Mermaid code. Provide a real-time preview of the diagram as the user types.

4. Support for Export and Import Description: Allow users to export Mermaid diagrams as images or SVG files and import existing Mermaid diagrams. Steps: Implement export functionality to save diagrams as PNG, JPEG, or SVG files. Allow users to import Mermaid code or image files and render them within OneNote. Ensure compatibility with other tools that support Mermaid diagrams.

[jasonjac2]

+1 for this, I started getting into Mermaid and have used it. @stevencohn has already implemented the call out to PlanttML and so as long as there is a reliable safe online renderer, then I would be very much in favour of this. I am not sure he will want to embed a renderer as it just generates additional maintenance. https://onemoreaddin.com/get-started/Online%20Services.htm

[stevencohn]

There may be a relatively lightweight path, but I need to investigate more....

• Simple full example @ https://mermaid.js.org/config/usage.html
• Render in a hidden Webview window...
• SVG to PNG... nuget (Github)

[nachogandhi]

I would like to +1 this as well, this would be incredibly useful for me!

[stevencohn]

Needs mermaid colorize definition