Sales Cycle: Difference between revisions

Browse history interactively

VisualWikitext

@@ Line 1: / Line 1: @@
+This page uses the [https://www.mediawiki.org/wiki/Extension:Mermaid mermaid extension] compared with the [[mw:Extension:Flex Diagrams]] to draw the same flow chart from simple markup, both leveraging the Mermaid.js diagramming library.
+== Diagram inline ==
+Using the Mermaid extension, and its <code>#mermaid</code> parser function, you can create diagrams right in your page.
+The syntax after the parser function is passed to Mermaid.js for interpretation.
+<pre>
 {{#mermaid:graph TD;
-Prospecting-->Contract Award/Purchase/ Agreement of Terms-->Original/Initial Contact-->Qualifying-->Deliverables-->Presentation/Demonstration/-->Follow-Up and Follow-through Proposal/Value Proposition-->Obtain Referrals-->Overcoming Objections-->-->Negotiations-->Maintain Contact-->Prospecting}}
+ 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}}
+ </pre>
+ produces
+{{#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}}
+== Distinct Namespace ==
+Using the '''[[mw:Extension:Flex Diagrams|Extension:Flex Diagrams]]''' extension<ref>Flex Diagrams does allow you to create 5 different types of diagrams:
+# BPMN diagrams (using the bpmn-js library)
+# Gantt charts (using the DHTMLX Gantt JS library)
+# DOT graphs, also known as Graphviz graphs (using the Viz.js library)
+# Mermaid diagrams
+# Drawio/diagrams.net diagrams
+The Flex Diagrams extension is most notable for its ability to do BPMN and Drawio diagrams.
+</ref>, 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 <code>#display_diagram</code> parser function.
+<pre>{{#display_diagram:Mermaid:Sales_Cycle}}</pre>
+produces the following diagram from the source at [[Mermaid:Sales Cycle]]
+{{#display_diagram:Mermaid:Sales_Cycle}}
-@todo This page should use the [https://www.mediawiki.org/wiki/Extension:Mermaid mermaid extension] or the [https://www.mediawiki.org/wiki/Extension:GraphViz graphviz extension] to draw a chart.
-[[Category:Sales]]
+{{References}}
-[[Category:Company]]
+[[Category:Diagrams]]