This solution contains a collection of web parts that make it easy to embed various types of diagrams in pages.
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.
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.
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.
| Solution | Author(s) |
|---|---|
| react-diagram-webparts | Hugo Bernier (Tahoe Ninjas, @bernierh) |
| Version | Date | Comments |
|---|---|---|
| 1.0 | Feb 8, 2019 | Initial release |
| 1.1 | Feb 12, 2019 | Added Mermaid diagram web part. |
| 1.2 | Apr 16, 2019 | Upgraded to SPFx 1.8 |
| 1.3 | Apr 22, 2019 | Upgraded to SPFx 1.8.1 |
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.
- Clone this repository
- in the command line run:
npm installgulp serve
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