Skip to content

A collection of web parts that make it easy to embed diagrams in SharePoint pages

Notifications You must be signed in to change notification settings

hugoabernier/react-diagram-webparts

Repository files navigation

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