new flowchart nodes

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "mermaid-tools",
 	"name": "Mermaid Tools",
-	"version": "1.1.1",
+	"version": "1.1.3",
 	"minAppVersion": "1.4.0",
 	"description": "Improved Mermaid.js experience for Obsidian: visual toolbar with common elements & more",
 	"author": "dartungar",

src/core/ElementCategory.ts

@@ -12,5 +12,7 @@ export enum ElementCategory {
     Mindmap = "Mindmap",
     Timeline = "Timeline",
     C4Diagram = "C4Diagram",
-    QuadrantChart = "QuadrantChart"
+    QuadrantChart = "QuadrantChart",
+    SankeyDiagram = "SankeyDiagram",
+    XyChart = "XyChart",
 }

src/core/elementService.ts

@@ -9,7 +9,7 @@ interface IWrappingData {
     wrappings: string[] | null
 }
 
-let wrappingsForElementCategories: Record<ElementCategory, IWrappingData> = {
+const wrappingsForElementCategories: Record<ElementCategory, IWrappingData> = {
     Flowchart: { defaultWrapping: "flowchart LR", wrappings: ["flowchart LR", "flowchart TD"] },
     SequenceDiagram: { defaultWrapping: "sequenceDiagram", wrappings: null },
     ClassDiagram: { defaultWrapping: "classDiagram", wrappings: null },
@@ -24,6 +24,8 @@ let wrappingsForElementCategories: Record<ElementCategory, IWrappingData> = {
     Timeline: { defaultWrapping: "timeline", wrappings: null },
     QuadrantChart: { defaultWrapping: "quadrantChart", wrappings: null },
     C4Diagram: { defaultWrapping: "C4Context", wrappings: null },
+    SankeyDiagram: { defaultWrapping: "sankey-beta", wrappings: null },
+    XyChart: { defaultWrapping: "xychart-beta", wrappings: null },
 }
 
 export class MermaidElementService {
@@ -34,7 +36,7 @@ export class MermaidElementService {
 
     public saveElement(element: IMermaidElement, plugin: MermaidPlugin): void {
 
-        let elementExists = plugin.settings.elements.some(el => el.id === element.id);
+        const elementExists = plugin.settings.elements.some(el => el.id === element.id);
 
         if (elementExists) {
             plugin.settings.elements.forEach(el => {
@@ -52,7 +54,7 @@ export class MermaidElementService {
     }
 
     public fixSortOrder(element: IMermaidElement, plugin: MermaidPlugin) {
-        let elementsFromSameCategory = plugin.settings.elements.filter(element => element.category === element.category);
+        const elementsFromSameCategory = plugin.settings.elements.filter(element => element.category === element.category);
         if (elementsFromSameCategory.some(element => element.sortingOrder === element.sortingOrder)) {
             element.sortingOrder = elementsFromSameCategory.length;
         }
@@ -76,9 +78,9 @@ export class MermaidElementService {
     }
 
     public wrapAsCompleteDiagram(element: IMermaidElement): string {
-        let wrapping = wrappingsForElementCategories[element.category];
+        const wrapping = wrappingsForElementCategories[element.category];
         // accTitle for Mindmap is bugged right now
-        let content = element.category === ElementCategory.Mindmap ? element.content : this.withTitle(element.description, element.content);
+        const content = element.category === ElementCategory.Mindmap ? element.content : this.withTitle(element.description, element.content);
         return (wrapping.wrappings 
                 ? wrapping.wrappings.some(w => element.content.contains(w)) 
                 : element.content.contains(wrapping.defaultWrapping))

src/elements/defaultElements.ts

@@ -9,12 +9,14 @@ import { mindMapElements } from "./mindMap";
 import { pieChartElements } from "./pieChart";
 import { quadrantElements } from "./quadrant";
 import { requirementDiagramElements } from "./requirementDiagram";
+import { sankeyDiagramElements } from "./sankeyDiagram";
 import { sequenceDiagramElements } from "./sequenceDiagram";
 import { stateDiagramElements } from "./stateDiagram";
 import { timelineElements } from "./timeline";
 import { userJourneyDiagramElements } from "./userJourneyDiagram";
+import { xyChartElements } from "./xyChart";
 
-export let defaultElements: IMermaidElement[] = [
+export const defaultElements: IMermaidElement[] = [
     ...flowchartElements,
     ...sequenceDiagramElements,
     ...classDiagramElements,
@@ -28,5 +30,7 @@ export let defaultElements: IMermaidElement[] = [
     ...mindMapElements,
     ...timelineElements,
     ...quadrantElements,
-    ...c4DiagramElements
+    ...c4DiagramElements,
+    ...sankeyDiagramElements,
+    ...xyChartElements
 ]

src/elements/flowchart.ts

@@ -1,7 +1,7 @@
 import { IMermaidElement } from "src/core/IMermaidElement";
 import { ElementCategory } from "../core/ElementCategory";
 
-export let flowchartElements: IMermaidElement[] = [
+export const flowchartElements: IMermaidElement[] = [
 	// flowchart
 	{
 		id: crypto.randomUUID(),
@@ -46,67 +46,150 @@ export let flowchartElements: IMermaidElement[] = [
 	{
 		id: crypto.randomUUID(),
 		category: ElementCategory.Flowchart,
-		description: "A node in the form of a circle",
+		description: "Circle",
 		content: "id1((Some text))",
 		sortingOrder: 6,
 		isPinned: false,
 	},
 	{
 		id: crypto.randomUUID(),
 		category: ElementCategory.Flowchart,
-		description: "A node (rhombus)",
+		description: "Rhombus",
 		content: "id1{Some text}",
 		sortingOrder: 7,
 		isPinned: false,
 	},
+
+	{
+		id: crypto.randomUUID(),
+		category: ElementCategory.Flowchart,
+		description: "Hexagon",
+		content: "id1{{Some text}}",
+		sortingOrder: 8,
+		isPinned: false,
+	},
+
+	{
+		id: crypto.randomUUID(),
+		category: ElementCategory.Flowchart,
+		description: "Parallelogram skewed right",
+		content: "id1[/Some text/]",
+		sortingOrder: 9,
+		isPinned: false,
+	},
+
+	{
+		id: crypto.randomUUID(),
+		category: ElementCategory.Flowchart,
+		description: "Parallelogram skewed left",
+		content: "id1[\\Some text\\]",
+		sortingOrder: 10,
+		isPinned: false,
+	},
+
+	{
+		id: crypto.randomUUID(),
+		category: ElementCategory.Flowchart,
+		description: "Trapezoid",
+		content: "A[/Some text\\]",
+		sortingOrder: 11,
+		isPinned: false,
+	},
+
+	{
+		id: crypto.randomUUID(),
+		category: ElementCategory.Flowchart,
+		description: "Trapezoid upside down",
+		content: "A[\\Some text/]",
+		sortingOrder: 12,
+		isPinned: false,
+	},
+
+	{
+		id: crypto.randomUUID(),
+		category: ElementCategory.Flowchart,
+		description: "Double circle node",
+		content: "id1(((Some text)))",
+		sortingOrder: 13,
+		isPinned: false,
+	},
 	{
 		id: crypto.randomUUID(),
 		category: ElementCategory.Flowchart,
 		description: "A link with arrow head",
 		content: "A-->B",
-		sortingOrder: 8,
+		sortingOrder: 14,
 		isPinned: false,
 	},
 	{
 		id: crypto.randomUUID(),
 		category: ElementCategory.Flowchart,
 		description: "An open link",
 		content: "A --- B",
-		sortingOrder: 9,
+		sortingOrder: 15,
 		isPinned: false,
 	},
 	{
 		id: crypto.randomUUID(),
 		category: ElementCategory.Flowchart,
 		description: "Text on links",
 		content: "A-- This is the text! ---B",
-		sortingOrder: 10,
+		sortingOrder: 16,
 		isPinned: false,
 	},
 	{
 		id: crypto.randomUUID(),
 		category: ElementCategory.Flowchart,
 		description: "A link with arrow head and text",
 		content: "A-->|text|B",
-		sortingOrder: 11,
+		sortingOrder: 17,
 		isPinned: false,
 	},
 	{
 		id: crypto.randomUUID(),
 		category: ElementCategory.Flowchart,
 		description: "Dotted link",
 		content: "A-.->B",
-		sortingOrder: 12,
+		sortingOrder: 18,
 		isPinned: false,
 	},
 	{
 		id: crypto.randomUUID(),
 		category: ElementCategory.Flowchart,
 		description: "Thick link",
 		content: "A ==> B",
-		sortingOrder: 13,
+		sortingOrder: 19,
+		isPinned: false,
+	},
+
+	{
+		id: crypto.randomUUID(),
+		category: ElementCategory.Flowchart,
+		description: "Invisible link",
+		content: "A ~~~ B",
+		sortingOrder: 20,
+		isPinned: false,
+	},
+
+	{
+		id: crypto.randomUUID(),
+		category: ElementCategory.Flowchart,
+		description: "Link with circle edge",
+		content: "A --o B",
+		sortingOrder: 21,
 		isPinned: false,
 	},
+
+	{
+		id: crypto.randomUUID(),
+		category: ElementCategory.Flowchart,
+		description: "Link with cross edge",
+		content: "A --x B",
+		sortingOrder: 22,
+		isPinned: false,
+	},
+
+
 	{
 		id: crypto.randomUUID(),
 		category: ElementCategory.Flowchart,

src/elements/pieChart.ts

@@ -1,7 +1,7 @@
 import { ElementCategory } from "src/core/ElementCategory";
 import { IMermaidElement } from "src/core/IMermaidElement";
 
-export let pieChartElements: IMermaidElement[] = [
+export const pieChartElements: IMermaidElement[] = [
 	{
 		id: crypto.randomUUID(),
 		category: ElementCategory.PieChart,

src/elements/quadrant.ts

@@ -1,7 +1,7 @@
 import { ElementCategory } from "src/core/ElementCategory";
 import { IMermaidElement } from "src/core/IMermaidElement";
 
-export let quadrantElements: IMermaidElement[] = [
+export const quadrantElements: IMermaidElement[] = [
 	{
 		id: crypto.randomUUID(),
 		category: ElementCategory.QuadrantChart,

src/elements/sampleDiagrams.ts

@@ -1,8 +1,7 @@
 import { ElementCategory } from "src/core/ElementCategory";
-import { IMermaidElement } from "src/core/IMermaidElement";
 
 // diagrams to insert by default
-export let sampleDiagrams: Record<ElementCategory, string> = {
+export const sampleDiagrams: Record<ElementCategory, string> = {
     EntityRelationshipDiagram: `erDiagram
     CUSTOMER ||--o{ ORDER : places
     ORDER ||--|{ LINE-ITEM : contains
@@ -136,5 +135,17 @@ export let sampleDiagrams: Record<ElementCategory, string> = {
       UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
       UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
     
-      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")`
+      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")`,
+      SankeyDiagram: `sankey-beta
+
+      %% source,target,value
+      Electricity grid,Over generation / exports,104.453
+      Electricity grid,Heating and cooling - homes,113.726
+      Electricity grid,H2 conversion,27.14`,
+      XyChart: `xychart-beta
+      title "Sales Revenue"
+      x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+      y-axis "Revenue (in $)" 4000 --> 11000
+      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]`
 }

src/elements/sankeyDiagram.ts

@@ -0,0 +1,17 @@
+import { ElementCategory } from "src/core/ElementCategory";
+import { IMermaidElement } from "src/core/IMermaidElement";
+
+export const sankeyDiagramElements: IMermaidElement[] = [
+	{
+		id: crypto.randomUUID(),
+		category: ElementCategory.SankeyDiagram,
+		description: "",
+		content: `sankey-beta
+        %% source,target,value
+        Electricity grid,Over generation / exports,104.453
+        Electricity grid,Heating and cooling - homes,113.726
+        Electricity grid,H2 conversion,27.14`,
+		sortingOrder: 0,
+		isPinned: false,
+	},
+]

src/elements/xyChart.ts

@@ -0,0 +1,18 @@
+import { ElementCategory } from "src/core/ElementCategory";
+import { IMermaidElement } from "src/core/IMermaidElement";
+
+export const xyChartElements: IMermaidElement[] = [
+	{
+		id: crypto.randomUUID(),
+		category: ElementCategory.XyChart,
+		description: "a sample XYChart diagram",
+		content: `xychart-beta
+        title "Sales Revenue"
+        x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        y-axis "Revenue (in $)" 4000 --> 11000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]`,
+		sortingOrder: 0,
+		isPinned: false,
+	},
+]