React Diagram Web Parts

Summary

This solution contains a collection of web parts that make it easy to embed various types of diagrams in pages.

Flowchart

The Flowchart web part allows you to use simple text to create flowchart diagrams in a page.

It uses the js-flowchart syntax to quickly create diagrams.

Mermaid diagram

The Mermaid diagram web part allows you to use simple text to create flowcharts, gantt charts, and sequence diagrams and control their appearance.

It uses the mermaidjs syntax to create awesome diagrams.

Sequence diagram

The Sequence diagram web part allows you to create sequence diagrams using simple text.

It uses the js-sequence-diagrams syntax to make creating sequence diagrams intuitive.

Used SharePoint Framework Version

Applies to

• SharePoint Framework
• Office 365 tenant

Solution

Version history

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Minimal Path to Awesome

• Clone this repository
• in the command line run:
  • npm install
  • gulp serve

Features

This Web Part illustrates the following concepts:

• Using react-sequence-diagram in a SPFx web part (React component based on js-sequence-diagrams)
• Using react-simple-flowchart in a SPFx web part (React component based on js-flowchart)
• Using mermaid in a SPFx web part.
• Converting a static SVG to a responsive SVG post-render
• Improving accessibility on a SVG post-render
• Creating a custom code editor property pane that allows custom code/syntax
• Using react-ace to embed an Ace Editor for code editing and syntax highlighting
• Creating custom syntax highlighting for react-ace
• Creating a custom Markdown property pane control that renders a read-only version of Markdown text in a property pane
• Using markdown-to-jsx to render Markdown in a web part