Chapter 1Introduction

What you get

The rest of this chapter explains what Mermaid is, when text-based diagrams beat drawing tools, and what the web part adds on top of the Mermaid engine. To start right away, go to Chapter 3.

1.1 What is Mermaid?

Mermaid is an open-source JavaScript library that converts plain text into SVG diagrams directly in the browser. It was created in 2014 by Knut Sveidqvist and has since grown into one of the most widely adopted diagramming systems in the software industry. Major platforms — GitHub, GitLab, Confluence, Notion, and Azure DevOps — all render Mermaid natively in their Markdown editors.

The core idea is simple: instead of drawing a diagram by dragging boxes and arrows, you describe the diagram in a concise notation, and Mermaid renders it. A flowchart that would take ten minutes to arrange by hand can be written in seconds:

This notation is instantly readable by a human, can be stored in any text file, and produces a clean, consistently styled vector diagram every time it is rendered.

1.2 Why text-based diagrams?

Most organisations still use visual drawing tools — Microsoft Visio, PowerPoint SmartArt, Lucidchart, or browser-based alternatives — to create diagrams. These tools have well-known limitations that text-based approaches solve directly.

1.3 When NOT to use Mermaid

Mermaid is excellent for structured, logic-driven diagrams. It is a less natural fit when:

• Precise visual layout matters. Mermaid controls the layout algorithmically. If you need exact pixel placement — floor plans, hardware schematics, custom infographics — a drawing tool is more appropriate.
• Non-technical authors create diagrams. Mermaid requires learning a small syntax. The built-in examples and snippets reduce this barrier significantly, but some users will still prefer a visual tool.
• Diagrams change constantly in real time. If the underlying data changes daily (e.g. a live org chart), a data-connected diagramming solution or auto-generated chart is more maintainable.

1.4 The Mermaid ecosystem

Because Mermaid is open-source and widely adopted, a large ecosystem has grown around it:

1.5 What the Mermaid Web Part adds

The Mermaid engine is a JavaScript library. Integrating it into a SharePoint web part requires solving several additional problems that the raw library does not address:

• Persistence. The Mermaid code must be saved and reloaded with the page. The web part stores each diagram as a text file in the site's Site Assets library, so diagrams survive page edits, upgrades and browser refreshes.
• Edit workflow. SharePoint has no code editor for diagrams. The web part provides a full-screen modal dialog with code editor, live preview, and save/cancel controls.
• Discovery. New users do not know Mermaid syntax. The built-in example library (47 ready-made diagrams) and snippet menu let users produce useful diagrams immediately without reading the Mermaid documentation.
• Click handler authoring. The Mermaid click syntax is not obvious to non-developers. The Add Click Handler tool generates correct click syntax from a form, making interactive diagrams accessible to all authors.
• Multi-instance support. Multiple diagrams can exist on the same page. Each web part instance maintains its own code independently.

1.6 Web Part features summary

1.7 Supported diagram types

The web part supports these 20 diagram types of the Mermaid engine (version 11.12); newer beta types such as packet-beta and radar-beta also render:

Chapter 2Editions and installation

2.1 Editions and packages

The Mermaid Web Part comes in four different packages. The editor and the diagrams are the same in all of them; only the installation differs.

2.2 Installing with the Installer

The Installer, Install-MermaidWebPart.ps1, is the easiest way to install Mermaid. It is one PowerShell script with a window, and it installs both the modern and the classic web part. To install manually instead, refer to 2.3 — 2.5.

1. Right-click Install-MermaidWebPart.ps1 and open it in PowerShell, or press F5 in the PowerShell ISE. The installer window opens.
2. Choose the package: SharePoint Online, SharePoint 2019 / SE or Classic sandboxed (.wsp).
3. Fill in where it goes: the App Catalog site for the two .sppkg packages, or the site for the .wsp. SharePoint Online also needs the app id of your own Entra app registration for PnP PowerShell.
4. Click Test (read only) to check the package and the sign-in. Then click Install. Tick What-if first if you want to see what would happen without changing anything.

What you need: for SharePoint Online, the SharePoint Administrator role; for SharePoint 2019 and Subscription Edition, site collection administrator of the App Catalog site, and Windows PowerShell 5.1 (the installer adds the PnP PowerShell module it needs when it is missing); for the .wsp, site collection administrator of the site, run on a SharePoint server. Without a window, for example in a scheduled task, run it with parameters, for example .\Install-MermaidWebPart.ps1 -Action Install -Kind Online -CatalogUrl https://contoso.sharepoint.com/sites/appcatalog -ClientId <app id> -NoUI $true.

2.3 Installing the modern package (.sppkg)

Install once and every editor can use it. These steps are for the SPFx packages; the Installer can do them for you (2.2).

Install

1. Open your App Catalog (in SharePoint Online: SharePoint admin center >More features >Apps, then Apps for SharePoint).
2. Click Upload, choose the .sppkg file and click OK.
3. SharePoint asks how to make the app available. Choose Only enable this app if site owners should add it themselves (step 4), or Enable this app and add it to all sites to put the Mermaid web part in the toolbox of every site at once. Then click Enable app. (SharePoint 2019 and Subscription Edition ask the same thing with the checkbox Make this solution available to all sites in the organization and the button Deploy.)

1. If you didn't add it to all sites, a site owner adds it under Site contents >New >App >Mermaid web part.

Upgrade

Upload the new .sppkg to the App Catalog and replace the old one. All sites get the new version; the diagrams are not touched, because they live in each site's Site Assets library.

Remove

Delete the app from the App Catalog, and from Site contents in sites where it was added. Pages can then no longer show the diagrams. The diagram files (Mermaid_*.txt in Site Assets) stay, so a reinstall shows the same diagrams again.

2.4 Installing the classic package (.wsp)

Use MM_Sand_<version>.wsp (or MM_Sand_<version>Premium.wsp) for classic pages in SharePoint 2013, 2016, 2019 and Subscription Edition. It is a sandboxed solution: a site collection administrator installs it, with no farm or server access. It is installed per site collection.

Install

1. Sign in as a site collection administrator and open the top site of the site collection.
2. Go to Site settings >Web Designer Galleries >Solutions.
3. Click Upload Solution, browse to the .wsp file and click OK.
4. In the dialog that opens, click Activate. This activates the solution.
5. Go to Site settings >Site Collection Administration >Site collection features, find Mermaid Webpart and make sure it shows Active; if it shows an Activate button, click it. This second activation turns the web part on in the site.

Activating the solution puts the Mermaid script (MM.js) in the Site Assets library and loads it for every page in the site. If the site has no Site Assets library, it is created. Then add a diagram to a page as in 3.1.

Upgrade

In Solutions, select the old Mermaid solution and click Deactivate, then upload the new .wsp and activate it twice, as when installing. The diagrams are not touched, because they are kept in Site Assets (3.3).

Remove

Deactivate the solution in Solutions, then delete it. Pages stop showing the diagrams; the diagram files (Mermaid_*.txt in Site Assets) stay, so a reinstall shows them again.

2.5 Installing with the PowerShell script (.ps1)

The file Install-MermaidWebPart.ps1 can be used to install the Mermaid web part in modern as well as classic SharePoint pages in both Online and On-Premises SharePoint.

Administrators who install on many sites can also do the same steps with PowerShell commands. Replace the file name, version and site address with your own.

Classic package (.wsp), SharePoint Management Shell on a SharePoint server:

Add-SPUserSolution -LiteralPath "C:\Install\MM_Sand_<version>.wsp" -Site "https://intranet/sites/Team"
Install-SPUserSolution -Identity "MM_Sand_<version>.wsp" -Site "https://intranet/sites/Team"

To upgrade, add the new file and run Update-SPUserSolution -Identity "MM_Sand_<old>.wsp" -ToSolution "MM_Sand_<new>.wsp" -Site .... To remove, run Uninstall-SPUserSolution and then Remove-SPUserSolution with the same -Identity and -Site.

SharePoint Online (.sppkg), PnP PowerShell:

Connect-PnPOnline -Url "https://contoso-admin.sharepoint.com" -Interactive -ClientId "<your app id>"
Add-PnPApp -Path "C:\Install\MM_SPFX_OnLine_<version>.sppkg" -Scope Tenant -Publish -Overwrite

SharePoint 2019 / Subscription Edition (.sppkg), PnP PowerShell: connect to the site of your on-premises App Catalog and run the same Add-PnPApp ... -Publish -Overwrite with the MM_SPFX_OnPrem file. Then add the app to a site with Install-PnPApp -Identity <app id>, or let site owners add it from Site contents (2.3).

2.6 Trial, registration and support

You may evaluate the Mermaid Web Part for 30 days with full functionality and without cost.

If you want to continue using the Mermaid Web Part after the trial period, you must start a subscription. We supply a Premium version of the Mermaid Web Part, which does not require registration at all, but organizations who select the Standard plan must register their installations.

Standard subscribers are given a registration key, which allows the organization to continue using the Mermaid Web Part for the duration of the subscription year.

Register the Mermaid Web Part

1. Open a page with a Mermaid diagram. When the trial has ended, the registration dialog opens over the diagram.
2. Enter an e-mail address with your company or organization domain, and the registration key you have received from kalmstrom.com Business Solutions.
3. Click Register.

The person who registers the Mermaid Web Part should have at least Owner permission on the site. Each site collection where the Mermaid Web Part is used needs to be registered. The registration key continues to work for as long as the organization is a kalmstrom.com subscriber.

Support

If you have any kind of problem or question about the Mermaid Web Part, there are several ways of contacting us:

Chapter 3Getting started

3.1 Adding the web part to a page

An administrator installs the web part once (see 2.2, or 2.3 and 2.4). After that, anyone who can edit a page can add it.

On a modern page (SharePoint Online, 2019, Subscription Edition)

1. Open the page and click Edit at the top right.
2. Point at the place where the diagram should go and click the round + button.
3. Type Mermaid in the search box of the toolbox and click the Mermaid web part (group Advanced).
4. The web part shows a default diagram at once.
5. Click Republish (or Publish) so visitors see the new web part.

On a classic page (.wsp package, see 2.4)

1. Open a wiki page (for example a new page in Site Pages) and click Edit.
2. Put the cursor where the diagram should go, then choose Format Text >Edit Source in the ribbon.
3. Type <div id="MMMain"></div> at that place and click OK.
4. Save the page. The default diagram appears where the line is.

3.2 The default diagram

When the web part is first placed on a page, it displays a built-in example that demonstrates several Mermaid features in one diagram: coloured nodes, styled links, and clickable nodes that open other pages.

The default diagram is a site architecture chart showing:

• A Home node linking to Projects and Admin Center
• Two project leaf nodes (Project 1, Project 2)
• Custom colours applied via classDef declarations
• Styled arrows (solid and dashed) via linkStyle
• Clickable boxes (Mermaid click syntax) that open parts of your own site: the site home, site pages, site settings, documents and site contents

You can replace this diagram at any time by opening the code editor (see Chapter 4).

3.3 How diagrams are saved

When you click OK in the editor, the Mermaid code is saved at once. You do not need to save the page for the diagram to be kept. Each web part instance keeps its code in its own small text file in the site's Site Assets library, named Mermaid_<instance ID>.txt. No list or database is needed.

3.4 Editing an existing diagram

To change a diagram that is already on the page:

1. Put the page in edit mode (Edit at the top right of a modern page; the ribbon on a classic page).
2. Open the editor. On a modern page, click next to the diagram to select the web part, then click the Edit properties button (the sliders icon) in the small toolbar above it. On a classic page, click the gear icon at the top right of the diagram.
3. The Mermaid Code Editor dialog opens (see Chapter 4).

4. Make your changes and click OK. The diagram is saved and redrawn at once.
5. Leave edit mode as usual. You don't need to republish the page for a diagram change.

3.5 Permissions

Access to the Mermaid Web Part is controlled entirely by SharePoint's standard page permissions. No special web part-level permissions exist.

3.6 Mobile and tablet use

The web part behaves differently in view mode compared to edit mode on small screens:

• View mode: The diagram is drawn at its full size, so its text stays readable. When it is wider or taller than the web part, scrollbars appear on the web part; swipe on touch devices to scroll. A diagram that fits shows no scrollbars. Interactive (clickable) nodes respond to taps on touch devices.
• Large diagrams: see the picture below: a diagram wider than the web part keeps its full size and gets a scrollbar.
• Edit mode: The code editor is a dialog about 600 px high. On small screens or with an on-screen keyboard active, the dialog may be partially obscured. Authoring diagrams is best done on a desktop browser with a physical keyboard.

Chapter 4The code editor

4.1 Editor layout

A splitter bar between the two panels can be dragged left or right. Each panel has a minimum width of 250 px.

4.2 Writing Mermaid code

Mermaid code starts with a diagram type declaration, followed by the content specific to that type. For example, a basic flowchart:

Each diagram type has its own syntax. The built-in examples (Chapter 6) demonstrate the most common patterns. For a full language reference visit the official Mermaid documentation at mermaid.js.org.

4.3 Live preview behaviour

The preview updates automatically while you type. There is a 500 ms debounce delay, so the engine waits until you pause before re-rendering. This prevents unnecessary re-renders on every keystroke.

When the code panel is empty, the preview displays the placeholder text "Enter code to see the preview..."

When the code contains a syntax error, the preview turns red and shows the engine's message with the line number. The error does not affect the saved diagram — the diagram on the page stays as it was until you save code that works.

4.4 Keyboard shortcuts in the editor

4.5 Saving and discarding changes

The toolbar at the bottom of the editor contains two controls:

• OK — closes the dialog, saves the new Mermaid code, and re-renders the diagram on the page. The change is kept at once; you do not need to save the page.
• Closing the dialog (window × button) — discards all changes typed in this editor session. The diagram on the page is unchanged.

4.6 Version and instance information

A grey information row at the bottom of the editor shows:

• The web part version number (e.g. Mermaid web part 0.2.0.8).
• The unique instance ID of the web part on the right. Hovering over this shows the tooltip "This is the unique ID of this web part". This ID is useful when reporting issues to an administrator.

Chapter 5Tools

5.1 Edit in Live

The ✏️ Edit in Live link opens the current diagram code in the Mermaid Live Editor in a new browser tab. The Mermaid Live Editor is the official online tool provided by the Mermaid project and offers additional features such as:

• Diagram configuration panels
• PNG and SVG export
• Shareable diagram URLs
• Alternative rendering engines

After editing in the Live Editor, copy the code from there and paste it back into the web part editor. Changes made in the Live Editor are not automatically synchronised back to SharePoint.

5.2 Snippets

The 📋 Snippets button opens a categorised drop-down menu of reusable code fragments. Clicking a snippet inserts it at the current cursor position in the editor.

Snippet categories:

5.3 Add Click Handler

The 🔗 Add Click button opens a dialog that generates the Mermaid click syntax for making a diagram node into a hyperlink.

Fields in the dialog

The Preview area at the bottom of the dialog shows the exact Mermaid syntax that will be inserted, updating live as you fill in the fields. Clicking Insert Click Handler appends the generated line to the editor at the cursor position and closes the dialog. Example: click A "https://intranet.example.com/projects" "Go to Projects" _blank

5.4 Right-click context menu (preview panel)

Right-clicking a node in the live preview panel opens a small context menu with two actions:

5.5 Theme picker

The Theme drop-down in the toolbar applies one of Mermaid's built-in color themes to the diagram: default, neutral, dark, forest or base.

Choosing a theme writes a small configuration block at the top of the diagram code:

---
config:
  theme: dark
---
graph TD
    A --> B

Because the theme is stored in the code itself, it is saved with the diagram and never affects other diagrams on the same page. You can also edit or remove the block by hand — the drop-down follows whatever the code says.

5.6 Charts from a SharePoint list

The 📊 From a list tab draws a chart from the items of a list on the same site: an org chart from a staff list, a gantt chart from a task list, a bar chart of sales per person. You pick the list and the columns; the web part writes the Mermaid code for you.

1. Open the code editor (3.4) and click the From a list tab.
2. Click a chart type: Org chart, Gantt chart, Pie chart, Bar, Line, Treemap or Kanban. Hover over a type to see what it needs.
3. Choose the list. Each list shows its number of items, e.g. Sales (4000).
4. Check the columns. There is one drop-down per column the chart needs; the web part has already picked the most likely one.
5. Type a Chart title if you want one, and decide on Keep in sync (below).
6. Click OK. The chart is saved and drawn on the page.

What each chart type needs

Value is what each slice, bar or box measures: the number of items, or the sum or average of a number column (e.g. Σ Sum · Amount). When you group by a date column, you can also choose to group the dates by month, quarter or year.

Keep in sync

The tab that is open when you click OK decides what is saved. To change a list chart by hand, switch to My own code: the chart's code is already there. A web part that is linked to a list opens on the From a list tab.

Examples

Each picture below is the preview of one chart type, made from a test list on a SharePoint Online site.

Chapter 6Example library

6.1 Opening the examples section

1. Open the code editor (see Chapter 3, section 3.4).
2. On the My own code tab, click Example Data at the left of the toolbar. The panel opens over the code.
3. The panel shows the 15 featured examples first, then the others under a heading per diagram type. Click any pill to load that example; it is saved at once.

6.2 Featured examples

The featured set contains 15 real-world demonstrations covering the most commonly used diagram types:

6.3 Additional examples by type

Below the featured set, the panel lists 32 more examples under a heading per diagram type. They show more specialised patterns:

6.4 Solution showcase

Three examples whose names start with 🎯 E-Commerce (under the C4, Sequence and ER headings) demonstrate how the same system can be documented from multiple perspectives using different diagram types:

• E-Commerce: System Context — C4 diagram showing external actors and system boundaries
• E-Commerce: Order Process — Sequence diagram of the checkout flow
• E-Commerce: Database Model — ER diagram of the data schema

This set illustrates how a single business domain can be communicated through complementary views.

Chapter 7Diagram type reference

7.1 Flow and process diagrams

Flowchart

Keywords: graph TD  /  graph LR  /  flowchart TD

The most versatile diagram type. Nodes connected by arrows represent decisions, steps, and data flows. Direction is set after the keyword: TD (top-down), LR (left-right), TB (top-bottom), BT (bottom-top), RL (right-left). Supports subgraphs, custom node shapes, class-based styling, link styles, and clickable nodes.

graph TD
    A[Start] --> B{Ready?}
    B -->|Yes| C[Continue]
    B -->|No| D[Wait]

Sequence diagram

Keyword: sequenceDiagram

Shows the chronological order of messages between participants (people, services, systems). Supports actors, alternative blocks (alt/else), parallel execution (par), loops, and notes. Participants can have clickable links via the link directive.

sequenceDiagram
    Client->>Server: GET /data
    Server-->>Client: 200 OK

State diagram

Keyword: stateDiagram-v2

Models the states an object or system can be in and the transitions between them. Useful for documenting order lifecycles, UI screen flows, or any process with distinct states.

stateDiagram-v2
    [*] --> Pending
    Pending --> Shipped : confirm
    Shipped --> [*]

User journey

Keyword: journey

Plots a user experience across sections and steps, with a satisfaction score (1–5) and the actors involved at each step. Good for UX analysis and customer journey mapping.

journey
    title Checkout flow
    section Browse
        Search: 5: Customer
        Add to cart: 4: Customer

7.2 Data and relationship diagrams

Entity Relationship diagram

Keyword: erDiagram

Describes database tables (entities), their attributes, and the relationships and cardinalities between them. Uses standard ER notation: ||--o{ (one-to-many), }|..|{ (many-to-many), etc.

erDiagram
    ORDER ||--o{ ITEM : contains
    ORDER { int id string status }

Class diagram

Keyword: classDiagram

Documents object-oriented class structures, interfaces, inheritance hierarchies, and associations. Supports method signatures, access modifiers (+/-/#), and generics notation.

classDiagram
    Animal <|-- Dog
    Animal : +String name
    Animal : +speak()

Requirement diagram

Keyword: requirementDiagram

Traces system requirements to implementing components. Each requirement has an ID, description, risk level, and verification method. Components are linked to requirements they satisfy.

requirementDiagram
    requirement REQ_01 {
        id: 1
        text: "System must log all actions"
        risk: medium
    }

7.3 Architecture diagrams

Architecture diagram beta

Keyword: architecture-beta

Renders infrastructure and service architecture using named icons (server, database, internet, cloud). Services are grouped into subnets or regions and connected with directional connectors.

architecture-beta
    group cloud(cloud)[Cloud]
        service db(database)[Database] in cloud
        service api(server)[API] in cloud
    api:R --> L:db

C4 diagram

Keyword: C4Context / C4Container / C4Component

Implements the C4 model for software architecture documentation. C4Context shows system context (people, systems, boundaries). Relationships include communication descriptions.

C4Context
    Person(user, "User")
    System(app, "Web App")
    Rel(user, app, "Uses", "HTTPS")

7.4 Project planning diagrams

Gantt chart

Keyword: gantt

Horizontal bar chart for project schedules. Tasks are arranged in sections with start dates (absolute or relative), durations, and statuses (done, active). Milestone markers have zero duration.

gantt
    dateFormat YYYY-MM-DD
    section Design
    Wireframes : done, 2025-01-01, 7d
    Review : active, 2025-01-08, 3d

Timeline

Keyword: timeline

Displays events on a horizontal or vertical axis grouped by time period. Each period lists one or more events. Simpler than Gantt but useful for historical overviews and roadmaps.

timeline
    title Company history
    2018 : Founded
    2021 : Series A : 10 employees
    2025 : IPO

Git graph

Keyword: gitGraph

Visualises Git branch and commit history. Shows branches, commits with IDs, merges, and tags. Useful for documenting branching strategies such as Gitflow.

gitGraph
    commit id: "init"
    branch feature
    commit id: "add login"
    checkout main
    merge feature tag: "v1.0"

Kanban board

Keyword: kanban

Renders a Kanban board with named swimlane columns (To Do, In Progress, Review, Done) and card items within each column.

kanban
    column1[To Do]
        task1[Write tests]
    column2[In Progress]
        task2[Build API]

7.5 Data visualisation

Pie chart

Keyword: pie

Simple proportional chart. Each slice is defined by a label and a numeric value. A title can be provided after the keyword.

pie title Browser share
    "Chrome" : 65
    "Edge" : 18
    "Firefox" : 10

XY chart beta

Keyword: xychart-beta

Renders bar and line series on a common X/Y axis. Axes are explicitly defined with labels and value ranges. Multiple series types can appear on one chart.

xychart-beta
    title "Monthly Revenue"
    x-axis [Jan, Feb, Mar, Apr]
    y-axis "USD (k)" 0 --> 100
    bar [42, 58, 73, 91]

Quadrant chart

Keyword: quadrantChart

Four-quadrant scatter plot where each quadrant is named. Items are placed by X and Y coordinates (0.0–1.0). Good for priority matrices and BCG-style analysis.

quadrantChart
    x-axis Low Impact --> High Impact
    y-axis Low Effort --> High Effort
    Feature A: [0.8, 0.3]

Sankey diagram beta

Keyword: sankey-beta

Flow diagram where the width of each arrow is proportional to the flow value. Each line defines: Source, Target, Value. Useful for energy flows, budget allocations, and material flows.

sankey-beta
    Solar,Electricity,80
    Wind,Electricity,40
    Electricity,Homes,70

Treemap beta

Keyword: treemap-beta

Hierarchical proportional chart where nested rectangles represent values at each level of a tree. Good for storage breakdowns, organisational sizes, or market share.

treemap-beta
    "Documents"
        "PDFs": 40
        "Images": 25

7.6 Other types

Block diagram beta (block-beta): boxes in columns you set yourself.

Mindmap

Keyword: mindmap

Radial branching structure rooted at a central concept. Child nodes are indented relative to their parent. Supports Font Awesome icon annotations (::icon(fa fa-...)).

mindmap
    root((Strategy))
        Growth
            Marketing
        Operations

Diagram configuration (YAML front matter)

Syntax: --- block before the diagram keyword

Any Mermaid diagram can include a YAML front-matter block to override the rendering theme, look, and individual theme variables. Common options:

---
config:
  theme: dark
  look: handDrawn
---
graph LR
    A --> B

• theme: base | default | dark | forest | neutral
• look: handDrawn — sketch-style rendering
• layout: elk — alternative graph layout engine
• themeVariables: — override individual colours

Chapter 8Troubleshooting

8.1 Common issues and solutions

8.1 Common issues and solutions (continued)

8.1 Common issues and solutions (continued)

8.1 Common issues and solutions (continued)

8.2 Permissions

SharePoint's own page permissions decide who can do what; the web part adds none of its own (table in 3.5):

8.3 Known limitations

The following limitations apply to all versions of the Mermaid Web Part:

8.4 Mobile and tablet use

Visitors can view diagrams and tap their links on any phone or tablet. Editing needs a desktop browser: on a small screen the editor dialog can be hidden behind the on-screen keyboard. See 3.6 for details.

Quick Reference

Glossary

Mermaid syntax

Mermaid syntax (continued)

Editor and web part

SharePoint

Rendering

Index

Index (continued)