Skip to content
A collection of web parts that make it easy to embed diagrams in SharePoint pages
TypeScript CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
assets
config
src
.editorconfig
.gitignore
.stylelintrc
.yo-rc.json
CHANGELOG.md
README.md
gulpfile.js
package-lock.json
package.json
tsconfig.json
tslint.json

README.md

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.

Diagram Web Parts

Flowchart

Flowchart Web Part

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

Mermaid Web Part

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

Sequence Diagram Web Part

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

SPFx v1.8.1

Applies to

Solution

Solution Author(s)
react-diagram-webparts Hugo Bernier (Tahoe Ninjas, @bernierh)

Version history

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

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

You can’t perform that action at this time.