Sales Cycle

Distinct Namespace

Using the Extension:Flex Diagrams extension, each diagram must be handled in it's own namespace - where it's really a custom content model. This means that no other markup is allowed. So, you can't use wikitext (e.g. Categories) at all. A somewhat useful if not confusing by-product of this is that the source code of the diagram is displayed inline with the diagram when reading the page.

In order to embed the diagram into a wiki page, you then use the extension's #display_diagram parser function.

{{#display_diagram:Mermaid:Sales_Cycle}}

produces the following diagram from the source at Mermaid:Sales Cycle

graph TD; A[Prospecting] -->|Original/Initial Contact| B(Contract Award / Purchase / Agreement of Terms) B --> C{Let me think} C -->|Qualifying| D[Qualified] C -->|Presentation/Demonstration| E[Comfortable] C -->|Follow-through Proposal/Value Proposition| F[fa:fa-car Incentivized] D --> G(Document Buying Cycle or Itch Cycle) E --> G F --> G G --> H(Negotiations) G --> I(Overcome Objections) G --> J(Establish Deliverables) G --> K(Maintain Contact) H --> L(Obtain Referrals) I --> L(Obtain Referrals) J --> L(Obtain Referrals) K --> L(Obtain Referrals) L --> A

Diagram inline

Using the Mermaid extension, and its #mermaid parser function, you can create diagrams right in your page.

The syntax after the parser function is passed to Mermaid.js for interpretation.

{{#mermaid:graph TD;
 A[Prospecting] -->|Original/Initial Contact| B(Contract Award / Purchase / Agreement of Terms)
 B --> C{Let me think}
 C -->|Qualifying| D[Qualified]
 C -->|Presentation/Demonstration| E[Comfortable]
 C -->|Follow-through Proposal/Value Proposition| F[fa:fa-car Incentivized]
 D --> G(Document Buying Cycle or Itch Cycle)
 E --> G
 F --> G
 G --> H(Negotiations)
 G --> I(Overcome Objections)
 G --> J(Establish Deliverables)
 G --> K(Maintain Contact)
 H --> L(Obtain Referrals)
 I --> L(Obtain Referrals)
 J --> L(Obtain Referrals)
 K --> L(Obtain Referrals)
 L --> A}}
 

produces

This page uses the mermaid extension compared with the mw:Extension:Flex Diagrams to draw the flow chart from simple markup.

Tools

Use the live (javascript) Mermaid Editor here

There are a ton of integrations for editing the Mermaid script language in your content platform or editor of choice. For example, there's an extension for VSCode to interact with Mermaid. See https://mermaid.js.org/ecosystem/integrations-community.html for the full rundown.