/*
THIS IS A GENERATED/BUNDLED FILE BY ESBUILD
if you want to view the source, please visit the github repository of this plugin
*/
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// main.ts
var main_exports = {};
__export(main_exports, {
TRIDENT_ICON_NAME: () => TRIDENT_ICON_NAME,
default: () => MermaidPlugin
});
module.exports = __toCommonJS(main_exports);
var import_obsidian6 = require("obsidian");
// src/core/ElementCategory.ts
var ElementCategory = /* @__PURE__ */ ((ElementCategory2) => {
ElementCategory2["Flowchart"] = "Flowchart";
ElementCategory2["SequenceDiagram"] = "SequenceDiagram";
ElementCategory2["ClassDiagram"] = "ClassDiagram";
ElementCategory2["StateDiagram"] = "StateDiagram";
ElementCategory2["EntityRelationshipDiagram"] = "EntityRelationshipDiagram";
ElementCategory2["UserJourneyDiagram"] = "UserJourneyDiagram";
ElementCategory2["GanttChart"] = "GanttChart";
ElementCategory2["PieChart"] = "PieChart";
ElementCategory2["RequirementDiagram"] = "RequirementDiagram";
ElementCategory2["GitGraph"] = "GitGraph";
ElementCategory2["Mindmap"] = "Mindmap";
ElementCategory2["Timeline"] = "Timeline";
ElementCategory2["C4Diagram"] = "C4Diagram";
ElementCategory2["QuadrantChart"] = "QuadrantChart";
ElementCategory2["SankeyDiagram"] = "SankeyDiagram";
ElementCategory2["XyChart"] = "XyChart";
return ElementCategory2;
})(ElementCategory || {});
// src/elements/sampleDiagrams.ts
var sampleDiagrams = {
EntityRelationshipDiagram: `erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses`,
ClassDiagram: `class BankAccount
BankAccount : +String owner
BankAccount : +Bigdecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)`,
Flowchart: "flowchart LR\nStart --> Stop",
GanttChart: `gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d`,
GitGraph: `gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit`,
PieChart: `pie title /r/obsidianmd posts by type
"Look at my awesome graph" : 85
"Look at my cool dashboard" : 14
"Moved from Notion, liking it" : 1`,
RequirementDiagram: ` requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req`,
SequenceDiagram: `sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!`,
StateDiagram: `stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]`,
UserJourneyDiagram: `journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me`,
Mindmap: `mindmap
Root
A
B
C`,
Timeline: `timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : Youtube
2006 : Twitter`,
QuadrantChart: `quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]`,
C4Diagram: `C4Context
title System Context diagram for Internet Banking System
Enterprise_Boundary(b0, "BankBoundary0") {
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C", "desc")
Person(customerD, "Banking Customer D", "A customer of the bank,
with personal bank accounts.")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
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")`,
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/c4Diagram.ts
var c4DiagramElements = [
{
id: crypto.randomUUID(),
category: "C4Diagram" /* C4Diagram */,
description: "sample C4 diagram (compatible with PlantUML)",
content: `C4Context
title System Context diagram for Internet Banking System
Enterprise_Boundary(b0, "BankBoundary0") {
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C", "desc")
Person(customerD, "Banking Customer D", "A customer of the bank,
with personal bank accounts.")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
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")`,
sortingOrder: 1,
isPinned: false
}
];
// src/elements/classDiagram.ts
var classDiagramElements = [
{
id: crypto.randomUUID(),
category: "ClassDiagram" /* ClassDiagram */,
description: "sample class",
content: `class Duck{
+String beakColor
+swim()
+quack()
}`,
sortingOrder: 0,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "ClassDiagram" /* ClassDiagram */,
description: "sample class",
content: `class BankAccount
BankAccount : +String owner
BankAccount : +Bigdecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)`,
sortingOrder: 1,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "ClassDiagram" /* ClassDiagram */,
description: "generic class",
content: `class Square~Shape~{
int id
List~int~ position
setPoints(List~int~ points)
getPoints() List~int~
}
Square : -List~string~ messages
Square : +setMessages(List~string~ messages)
Square : +getMessages() List~string~`,
sortingOrder: 2,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "ClassDiagram" /* ClassDiagram */,
description: "inheritance",
content: "classA <|-- classB",
sortingOrder: 3,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "ClassDiagram" /* ClassDiagram */,
description: "composition",
content: "classC *-- classD",
sortingOrder: 4,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "ClassDiagram" /* ClassDiagram */,
description: "aggregation",
content: "classE o-- classF",
sortingOrder: 5,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "ClassDiagram" /* ClassDiagram */,
description: "association",
content: "classG <-- classH",
sortingOrder: 6,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "ClassDiagram" /* ClassDiagram */,
description: "solid link",
content: "classI -- classJ",
sortingOrder: 7,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "ClassDiagram" /* ClassDiagram */,
description: "dependency",
content: "classK <.. classL",
sortingOrder: 8,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "ClassDiagram" /* ClassDiagram */,
description: "realization",
content: "classM <|.. classN",
sortingOrder: 9,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "ClassDiagram" /* ClassDiagram */,
description: "dashed link",
content: "classO .. classP",
sortingOrder: 10,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "ClassDiagram" /* ClassDiagram */,
description: "two-way relation",
content: "Animal <|--|> Zebra",
sortingOrder: 11,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "ClassDiagram" /* ClassDiagram */,
description: "sample class diagram",
content: `classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}`,
sortingOrder: 12,
isPinned: false
}
];
// src/elements/entityRelationshipDiagram.ts
var entityRelationshipDiagramElements = [
{
id: crypto.randomUUID(),
category: "EntityRelationshipDiagram" /* EntityRelationshipDiagram */,
description: "a sample entity relationship diagram",
content: `erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses`,
sortingOrder: 0,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "EntityRelationshipDiagram" /* EntityRelationshipDiagram */,
description: "an entity",
content: ` CUSTOMER {
string name
string custNumber
string sector
}`,
sortingOrder: 1,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "EntityRelationshipDiagram" /* EntityRelationshipDiagram */,
description: "one-to-many relationship",
content: `A ||--|{ B : label`,
sortingOrder: 2,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "EntityRelationshipDiagram" /* EntityRelationshipDiagram */,
description: "many-to-many relationship",
content: `A }|--|{ B : label`,
sortingOrder: 3,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "EntityRelationshipDiagram" /* EntityRelationshipDiagram */,
description: "one-to-one relationship",
content: `A ||--|| B : label`,
sortingOrder: 4,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "EntityRelationshipDiagram" /* EntityRelationshipDiagram */,
description: "many-to-one relationship",
content: `A }|--|| B : label`,
sortingOrder: 5,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "EntityRelationshipDiagram" /* EntityRelationshipDiagram */,
description: "zero/one-to-one relationship",
content: `A |o--|| B : label`,
sortingOrder: 6,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "EntityRelationshipDiagram" /* EntityRelationshipDiagram */,
description: "one-to-one/zero relationship",
content: `A ||--o| B : label`,
sortingOrder: 7,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "EntityRelationshipDiagram" /* EntityRelationshipDiagram */,
description: "zero-or-more-to-one relationship",
content: `A }o--|| B : label`,
sortingOrder: 8,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "EntityRelationshipDiagram" /* EntityRelationshipDiagram */,
description: "one-to-zero-or-more relationship",
content: `A ||--o{ B : label`,
sortingOrder: 9,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "EntityRelationshipDiagram" /* EntityRelationshipDiagram */,
description: "zero-or-more-to-many relationship",
content: `A }o--|{ B : label`,
sortingOrder: 10,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "EntityRelationshipDiagram" /* EntityRelationshipDiagram */,
description: "many-to-zero-or-more relationship",
content: `A }|--o{ B : label`,
sortingOrder: 11,
isPinned: false
}
];
// src/elements/flowchart.ts
var flowchartElements = [
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "a simple flowchart with top to down direction",
content: `flowchart TD
Start --> Stop`,
sortingOrder: 1,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "a simple flowchart with left to right direction",
content: "flowchart LR\nStart --> Stop",
sortingOrder: 2,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "A node with round edges",
content: "id1(Some text)",
sortingOrder: 3,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "A stadium-shaped node",
content: "id1([Some text])",
sortingOrder: 4,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "A node in a cylindrical shape",
content: "id1[(Database)]",
sortingOrder: 5,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "Circle",
content: "id1((Some text))",
sortingOrder: 6,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "Rhombus",
content: "id1{Some text}",
sortingOrder: 7,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "Hexagon",
content: "id1{{Some text}}",
sortingOrder: 8,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "Parallelogram skewed right",
content: "id1[/Some text/]",
sortingOrder: 9,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "Parallelogram skewed left",
content: "id1[\\Some text\\]",
sortingOrder: 10,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "Trapezoid",
content: "A[/Some text\\]",
sortingOrder: 11,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "Trapezoid upside down",
content: "A[\\Some text/]",
sortingOrder: 12,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "Double circle node",
content: "id1(((Some text)))",
sortingOrder: 13,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "A link with arrow head",
content: "A-->B",
sortingOrder: 14,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "An open link",
content: "A --- B",
sortingOrder: 15,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "Text on links",
content: "A-- This is the text! ---B",
sortingOrder: 16,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "A link with arrow head and text",
content: "A-->|text|B",
sortingOrder: 17,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "Dotted link",
content: "A-.->B",
sortingOrder: 18,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "Thick link",
content: "A ==> B",
sortingOrder: 19,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "Invisible link",
content: "A ~~~ B",
sortingOrder: 20,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "Link with circle edge",
content: "A --o B",
sortingOrder: 21,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "Link with cross edge",
content: "A --x B",
sortingOrder: 22,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Flowchart" /* Flowchart */,
description: "Subgraph",
content: "subgraph one\na1-->a2\nend",
sortingOrder: 14,
isPinned: false
}
];
// src/elements/ganntChart.ts
var ganttChartElements = [
{
id: crypto.randomUUID(),
category: "GanttChart" /* GanttChart */,
description: "simple gantt chart",
content: `gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d`,
sortingOrder: 0,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "GanttChart" /* GanttChart */,
description: "rich gantt chart",
content: `gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
Functionality added :milestone, 2014-01-25, 0d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h`,
sortingOrder: 1,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "GanttChart" /* GanttChart */,
description: "milestones example",
content: `gantt
dateFormat HH:mm
axisFormat %H:%M
Initial milestone : milestone, m1, 17:49,2min
taska2 : 10min
taska3 : 5min
Final milestone : milestone, m2, 18:14, 2min`,
sortingOrder: 2,
isPinned: false
}
];
// src/elements/gitGraph.ts
var gitGraphElements = [
{
id: crypto.randomUUID(),
category: "GitGraph" /* GitGraph */,
description: "simple git graph",
content: `gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit`,
sortingOrder: 0,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "GitGraph" /* GitGraph */,
description: "tagged commit",
content: `commit id: "Normal" tag: "v1.0.0"`,
sortingOrder: 1,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "GitGraph" /* GitGraph */,
description: "reverse commit",
content: `commit id: "Reverse" type: REVERSE`,
sortingOrder: 2,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "GitGraph" /* GitGraph */,
description: "highlighted commit",
content: `commit id: "Highlight" type: HIGHLIGHT`,
sortingOrder: 3,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "GitGraph" /* GitGraph */,
description: "reverse commit",
content: `commit id: "Reverse" type: REVERSE`,
sortingOrder: 4,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "GitGraph" /* GitGraph */,
description: "git graph with cherry-pick",
content: `gitGraph
commit id: "ZERO"
branch develop
commit id:"A"
checkout main
commit id:"ONE"
checkout develop
commit id:"B"
checkout main
commit id:"TWO"
cherry-pick id:"A"
commit id:"THREE"
checkout develop
commit id:"C"`,
sortingOrder: 5,
isPinned: false
}
];
// src/elements/mindMap.ts
var mindMapElements = [
{
id: crypto.randomUUID(),
category: "Mindmap" /* Mindmap */,
description: "a simple mindmap",
content: `mindmap
Root
A
B
C`,
sortingOrder: 1,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Mindmap" /* Mindmap */,
description: "square",
content: `id[I am a square]`,
sortingOrder: 2,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Mindmap" /* Mindmap */,
description: "rounded square",
content: `id(I am a rounded square)`,
sortingOrder: 3,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Mindmap" /* Mindmap */,
description: "circle",
content: `id((I am a circle))`,
sortingOrder: 4,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Mindmap" /* Mindmap */,
description: "bang",
content: `id))I am a bang((`,
sortingOrder: 5,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Mindmap" /* Mindmap */,
description: "cloud",
content: `id)I am a cloud(`,
sortingOrder: 6,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Mindmap" /* Mindmap */,
description: "hexagon",
content: `id{{I am a hexagon}}`,
sortingOrder: 7,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Mindmap" /* Mindmap */,
description: "default",
content: `I am the default shape`,
sortingOrder: 8,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Mindmap" /* Mindmap */,
description: "sample mindmap",
content: `mindmap
root((mindmap))
Origins
Long history
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness
and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid`,
sortingOrder: 9,
isPinned: false
}
];
// src/elements/pieChart.ts
var pieChartElements = [
{
id: crypto.randomUUID(),
category: "PieChart" /* PieChart */,
description: "sample pie chart",
content: `pie title /r/obsidianmd posts by type
"Look at my awesome graph" : 85
"Look at my cool dashboard" : 14
"Moved from Notion, liking it" : 1`,
sortingOrder: 0,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "PieChart" /* PieChart */,
description: "sample pie chart with values shown in legend",
content: `pie showdata
title /r/obsidianmd posts by type
"Graphs" : 85
"Dashboards" : 14
"Tips" : 1`,
sortingOrder: 1,
isPinned: false
}
];
// src/elements/quadrant.ts
var quadrantElements = [
{
id: crypto.randomUUID(),
category: "QuadrantChart" /* QuadrantChart */,
description: "sample quadrant chart",
content: `quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]`,
sortingOrder: 1,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "QuadrantChart" /* QuadrantChart */,
description: "themed quadrant chart",
content: `%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
quadrantChart
x-axis Urgent --> Not Urgent
y-axis Not Important --> "Important \u2764"
quadrant-1 Plan
quadrant-2 Do
quadrant-3 Delegate
quadrant-4 Delete`,
sortingOrder: 1,
isPinned: false
}
];
// src/elements/requirementDiagram.ts
var requirementDiagramElements = [
{
id: crypto.randomUUID(),
category: "RequirementDiagram" /* RequirementDiagram */,
description: "sample requirements diagram",
content: ` requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req`,
sortingOrder: 0,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "RequirementDiagram" /* RequirementDiagram */,
description: "sample requirements diagram",
content: `element customElement {
type: customType
docref: customDocRef
}`,
sortingOrder: 1,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "RequirementDiagram" /* RequirementDiagram */,
description: "a requirement with high risk",
content: `functionalRequirement myReq {
id: reqId
text: someText
risk: High
verifymethod: analysis
}`,
sortingOrder: 2,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "RequirementDiagram" /* RequirementDiagram */,
description: "sample requirements diagram",
content: `interfaceRequirement myReq2 {
id: reqId
text: someText
risk: Medium
verifymethod: demonstration
}`,
sortingOrder: 3,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "RequirementDiagram" /* RequirementDiagram */,
description: "sample requirements diagram",
content: `designConstraint myReq3 {
id: reqId
text: someText
risk: Low
verifymethod: test
}`,
sortingOrder: 4,
isPinned: false
}
];
// src/elements/sankeyDiagram.ts
var sankeyDiagramElements = [
{
id: crypto.randomUUID(),
category: "SankeyDiagram" /* 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/sequenceDiagram.ts
var sequenceDiagramElements = [
{
id: crypto.randomUUID(),
category: "SequenceDiagram" /* SequenceDiagram */,
description: "a simple sequence diagram",
content: `sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!`,
sortingOrder: 0,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "SequenceDiagram" /* SequenceDiagram */,
description: "a simple sequence diagram with actors",
content: `sequenceDiagram
actor Alice
actor John
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!`,
sortingOrder: 1,
isPinned: false
}
];
// src/elements/stateDiagram.ts
var stateDiagramElements = [
{
id: crypto.randomUUID(),
category: "StateDiagram" /* StateDiagram */,
description: "a sample state diagram",
content: `stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]`,
sortingOrder: 0,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "StateDiagram" /* StateDiagram */,
description: "a sample state diagram with left-to-right direction",
content: `stateDiagram-v2
direction LR
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]`,
sortingOrder: 1,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "StateDiagram" /* StateDiagram */,
description: "node with description",
content: `s2 : This is a state description`,
sortingOrder: 2,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "StateDiagram" /* StateDiagram */,
description: "a transition",
content: `s1 --> s2`,
sortingOrder: 3,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "StateDiagram" /* StateDiagram */,
description: "a transition with label",
content: `s1 --> s2: A transition`,
sortingOrder: 4,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "StateDiagram" /* StateDiagram */,
description: "composite state",
content: `
[*] --> First
state First {
[*] --> second
second --> [*]
}`,
sortingOrder: 5,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "StateDiagram" /* StateDiagram */,
description: "diagram with choice",
content: `stateDiagram-v2
state if_state <>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0`,
sortingOrder: 6,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "StateDiagram" /* StateDiagram */,
description: "diagram with fork",
content: `stateDiagram-v2
state fork_state <>
[*] --> fork_state
fork_state --> State2
fork_state --> State3
state join_state <>
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]`,
sortingOrder: 7,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "StateDiagram" /* StateDiagram */,
description: "a diagram with concurrency",
content: `stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}`,
sortingOrder: 8,
isPinned: false
}
];
// src/elements/timeline.ts
var timelineElements = [
{
id: crypto.randomUUID(),
category: "Timeline" /* Timeline */,
description: "sample timeline",
content: `timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : Youtube
2006 : Twitter`,
sortingOrder: 1,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Timeline" /* Timeline */,
description: "timeline with grouping",
content: `timeline
title Timeline of Industrial Revolution
section 17th-20th century
Industry 1.0 : Machinery, Water power, Steam
power
Industry 2.0 : Electricity, Internal combustion engine, Mass production
Industry 3.0 : Electronics, Computers, Automation
section 21st century
Industry 4.0 : Internet, Robotics, Internet of Things
Industry 5.0 : Artificial intelligence, Big data,3D printing`,
sortingOrder: 2,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "Timeline" /* Timeline */,
description: "timeline with Forest theme. see the docs for additional themes",
content: `%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest`,
sortingOrder: 3,
isPinned: false
}
];
// src/elements/userJourneyDiagram.ts
var userJourneyDiagramElements = [
{
id: crypto.randomUUID(),
category: "UserJourneyDiagram" /* UserJourneyDiagram */,
description: "a sample user journey diagram",
content: `journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me`,
sortingOrder: 0,
isPinned: false
},
{
id: crypto.randomUUID(),
category: "UserJourneyDiagram" /* UserJourneyDiagram */,
description: "a step in user journey",
content: ` Step Title: 5: ActorName`,
sortingOrder: 1,
isPinned: false
}
];
// src/elements/xyChart.ts
var xyChartElements = [
{
id: crypto.randomUUID(),
category: "XyChart" /* 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
}
];
// src/elements/defaultElements.ts
var defaultElements = [
...flowchartElements,
...sequenceDiagramElements,
...classDiagramElements,
...stateDiagramElements,
...entityRelationshipDiagramElements,
...userJourneyDiagramElements,
...ganttChartElements,
...pieChartElements,
...requirementDiagramElements,
...gitGraphElements,
...mindMapElements,
...timelineElements,
...quadrantElements,
...c4DiagramElements,
...sankeyDiagramElements,
...xyChartElements
];
// src/core/elementService.ts
var wrappingsForElementCategories = {
Flowchart: { defaultWrapping: "flowchart LR", wrappings: ["flowchart LR", "flowchart TD"] },
SequenceDiagram: { defaultWrapping: "sequenceDiagram", wrappings: null },
ClassDiagram: { defaultWrapping: "classDiagram", wrappings: null },
StateDiagram: { defaultWrapping: "stateDiagram-v2", wrappings: null },
EntityRelationshipDiagram: { defaultWrapping: "erDiagram", wrappings: null },
UserJourneyDiagram: { defaultWrapping: "journey", wrappings: null },
GanttChart: { defaultWrapping: "gantt", wrappings: null },
PieChart: { defaultWrapping: "pie", wrappings: null },
RequirementDiagram: { defaultWrapping: "requirementDiagram", wrappings: null },
GitGraph: { defaultWrapping: "gitGraph", wrappings: null },
Mindmap: { defaultWrapping: "mindmap", wrappings: ["mindmap"] },
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 }
};
var MermaidElementService = class {
static DefaultElements() {
return defaultElements;
}
saveElement(element, plugin) {
const elementExists = plugin.settings.elements.some((el) => el.id === element.id);
if (elementExists) {
plugin.settings.elements.forEach((el) => {
if (el.id === element.id) {
el = element;
}
});
} else {
this.fixSortOrder(element, plugin);
plugin.settings.elements.push(element);
}
plugin.saveSettings();
}
fixSortOrder(element, plugin) {
const elementsFromSameCategory = plugin.settings.elements.filter((element2) => element2.category === element2.category);
if (elementsFromSameCategory.some((element2) => element2.sortingOrder === element2.sortingOrder)) {
element.sortingOrder = elementsFromSameCategory.length;
}
}
getSampleDiagram(category) {
return this.wrapForPastingIntoEditor(this.wrapWithMermaidBlock(sampleDiagrams[category]));
}
wrapForPastingIntoEditor(text) {
return `${text}
`;
}
wrapWithMermaidBlock(text) {
return `\`\`\`mermaid
${text}
\`\`\``;
}
withTitle(title, text) {
return `${text}
accTitle: ${title}
`;
}
wrapAsCompleteDiagram(element) {
const wrapping = wrappingsForElementCategories[element.category];
const content = element.category === "Mindmap" /* 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)) ? content : wrapping.defaultWrapping + "\n" + content;
}
};
// src/core/textEditorService.ts
var NoActiveCursorError = class extends Error {
constructor() {
super();
this.message = "Mermaid Tools: Error getting cursor position. Make sure you are in editing mode and have an active cursor in file content.";
}
};
var TextEditorService = class {
constructor() {
this._elementService = new MermaidElementService();
}
insertTextAtCursor(editor, content) {
if (!editor)
throw new NoActiveCursorError();
content = this._elementService.wrapForPastingIntoEditor(content);
let cursor = editor.getCursor();
editor.replaceRange(content, cursor);
editor.setCursor(content.length);
}
};
// src/settings/settings.ts
var MermaidPluginSettings = class {
constructor() {
this.categories = ElementCategory;
}
static DefaultSettings() {
let settings = new MermaidPluginSettings();
settings.elements = defaultElements;
settings.selectedCategory = "Flowchart" /* Flowchart */;
return settings;
}
};
// src/trident-icon.ts
var import_obsidian = require("obsidian");
function addTridentIcon() {
(0, import_obsidian.addIcon)(TRIDENT_ICON_NAME, getSanitizedSvg());
}
function getSanitizedSvg() {
var sanitized = (0, import_obsidian.sanitizeHTMLToDom)(tridentIcon);
var tempContainer = createDiv();
tempContainer.appendChild(sanitized);
return tempContainer.innerHTML;
}
var tridentIcon = ``;
// src/ui/settingsTab.ts
var import_obsidian3 = require("obsidian");
// src/ui/editMermaidElementModal.ts
var import_obsidian2 = require("obsidian");
var EditMermaidElementModal = class extends import_obsidian2.Modal {
constructor(app, _plugin, _mermaid, _element) {
super(app);
this._plugin = _plugin;
this._mermaid = _mermaid;
this._element = _element;
}
async onOpen() {
let { contentEl } = this;
contentEl.addClass("mermaid-tools-edit-element-modal");
contentEl.createEl("h2", { text: "Edit element" });
let renderContainerEl = contentEl.createDiv();
let renderEl = renderContainerEl.createEl("pre", { text: "rendered diagram" });
if (!this._mermaid)
this._mermaid = await (0, import_obsidian2.loadMermaid)();
renderEl.id = "mermaid-edit-element-modal";
let elementCategoryContainerEl = contentEl.createDiv();
elementCategoryContainerEl.createEl("label", { text: "Category" });
let elementCategoryEl = elementCategoryContainerEl.createEl("select");
for (let category in ElementCategory) {
let option = elementCategoryEl.createEl("option", { text: category });
option.value = category;
}
elementCategoryEl.value = this._element.category;
elementCategoryEl.onchange = (e) => {
this._element.category = elementCategoryEl.value;
};
let elementDescriptionContainerEl = contentEl.createDiv();
elementDescriptionContainerEl.createEl("label", { text: "Description" });
let elementDescriptionEl = elementDescriptionContainerEl.createEl("input", { value: this._element.description, type: "text" });
elementDescriptionEl.style.minWidth = "50%";
elementDescriptionEl.onchange = (e) => {
this._element.description = elementDescriptionEl.value;
};
let elementContentContainerEl = contentEl.createDiv();
elementContentContainerEl.createEl("label", { text: "Content" });
let elementContentEl = elementContentContainerEl.createEl("textarea", { text: this._element.content });
elementContentEl.style.height = "200px";
elementContentEl.style.width = "100%";
elementContentEl.onchange = async (e) => {
this._element.content = elementContentEl.value;
let { svg: svg2 } = await this._mermaid.render(renderEl.id, this._plugin._mermaidElementService.wrapAsCompleteDiagram(this._element));
renderEl.innerHTML = svg2;
renderContainerEl.appendChild(renderEl);
};
let saveButtonEl = contentEl.createEl("button", { text: "Save" });
saveButtonEl.onclick = (e) => {
this.save();
};
let { svg } = await this._mermaid.render(renderEl.id, this._plugin._mermaidElementService.wrapAsCompleteDiagram(this._element));
renderEl.innerHTML = svg;
renderContainerEl.appendChild(renderEl);
}
save() {
this._plugin._mermaidElementService.saveElement(this._element, this._plugin);
this.close();
}
};
// src/ui/settingsTab.ts
var MermaidToolsSettingsTab = class extends import_obsidian3.PluginSettingTab {
constructor(_app, _plugin) {
super(_app, _plugin);
this._app = _app;
this._plugin = _plugin;
}
async display() {
await renderElements(this.containerEl, this._plugin);
}
};
async function renderElements(containerEl, plugin) {
let mermaid = await (0, import_obsidian3.loadMermaid)();
containerEl.empty();
containerEl.createEl("h1", { text: "Mermaid Tools Settings" });
containerEl.createEl("h2", { text: "Manage elements" });
createAddButton(containerEl, plugin);
for (let category in ElementCategory) {
renderElementCategory(category, plugin, containerEl, mermaid);
}
;
}
function renderElementCategory(category, plugin, parentEl, mermaid) {
let copy = [...plugin.settings.elements];
let elements = copy.filter((e) => e.category === category);
let containerEl = document.getElementById(category + "-container");
let isFirstRender = !containerEl;
containerEl != null ? containerEl : containerEl = parentEl.createDiv();
containerEl.id = category + "-container";
containerEl.innerHTML = "";
let header = containerEl.createEl("h3", { text: category });
header.addClass("mermaid-tools-element-category-header");
let elementsContainerEl = containerEl.createDiv();
elementsContainerEl.addClass("mermaid-tools-element-category-container");
header.removeClass("collapsed");
elementsContainerEl.hidden = false;
if (isFirstRender) {
header.addClass("collapsed");
elementsContainerEl.hidden = true;
}
header.onClickEvent(() => {
header.classList.toggle("collapsed");
elementsContainerEl.hidden = !elementsContainerEl.hidden;
});
elements.sort((a, b) => a.sortingOrder - b.sortingOrder).forEach(async (element, index) => {
let settingContainer = elementsContainerEl.createDiv("mermaid-tools-element-container");
const setting = new import_obsidian3.Setting(settingContainer);
setting.setName(element.description);
setting.addExtraButton((cb) => {
cb.setIcon("edit").setTooltip("edit element").onClick(() => {
let modal = new EditMermaidElementModal(plugin.app, plugin, mermaid, element);
modal.open();
modal.onClose = () => {
renderElementCategory(category, plugin, parentEl, mermaid);
};
});
});
setting.addExtraButton((cb) => {
cb.setIcon("copy").setTooltip("create a duplicate of this element").onClick(() => {
let duplicate = {
id: crypto.randomUUID(),
category: element.category,
description: element.description + " (copy)",
content: element.content,
sortingOrder: plugin.settings.elements.filter((el) => el.category === element.category).length,
isPinned: element.isPinned
};
plugin._mermaidElementService.saveElement(duplicate, plugin);
plugin.saveSettings();
renderElementCategory(category, plugin, parentEl, mermaid);
});
});
setting.addExtraButton((cb) => {
cb.setIcon("arrow-up").setTooltip("move element up in the sidebar").onClick(() => {
if (index > 0) {
const temp = elements[index - 1].sortingOrder;
elements[index - 1].sortingOrder = element.sortingOrder;
element.sortingOrder = temp;
plugin.settings.elements = plugin.settings.elements.filter((el) => el.category !== category).concat(elements);
plugin.saveSettings();
renderElementCategory(category, plugin, parentEl, mermaid);
}
});
});
setting.addExtraButton((cb) => {
cb.setIcon("arrow-down").setTooltip("move element down in the sidebar").onClick(() => {
if (index < elements.length - 1) {
const temp = elements[index + 1].sortingOrder;
elements[index + 1].sortingOrder = element.sortingOrder;
element.sortingOrder = temp;
plugin.settings.elements = plugin.settings.elements.filter((el) => el.category !== category).concat(elements);
plugin.saveSettings();
renderElementCategory(category, plugin, parentEl, mermaid);
}
});
});
setting.addExtraButton((cb) => {
cb.setIcon("trash-2").setTooltip("delete element").onClick(() => {
plugin.settings.elements = plugin.settings.elements.filter((e) => e.id !== element.id);
plugin.saveSettings();
renderElementCategory(category, plugin, parentEl, mermaid);
});
});
});
}
function createAddButton(parentEl, plugin) {
const addButton = parentEl.createEl("button", { text: "Add" });
addButton.innerHTML = "Add an element";
addButton.onclick = () => {
let newElement = {
id: crypto.randomUUID(),
description: "New element",
content: `flowchart TD
Start --> Stop`,
category: "Flowchart" /* Flowchart */,
sortingOrder: 0,
isPinned: false
};
let modal = new EditMermaidElementModal(plugin.app, plugin, null, newElement);
modal.open();
modal.onClose = () => {
renderElementCategory(modal._element.category, plugin, parentEl, null);
};
};
}
// src/ui/toolbarView/mermaidToolbarView.ts
var import_obsidian5 = require("obsidian");
// src/ui/toolbarView/viewHelpers.ts
var import_obsidian4 = require("obsidian");
var TOOLBAR_ELEMENT_CLASS_NAME = "mermaid-toolbar-element";
var TOOLBAR_ELEMENTS_CONTAINER_CLASS_NAME = "mermaid-toolbar-elements-container";
var TOOLBAR_ELEMENTS_CONTAINER_ID = "mermaid-toolbar-elements-container-id";
async function createMermaidToolbar(topRowButtons, items, selectedCategory, onCategoryChanged, onElementClick) {
let container = document.createElement("div");
let topRow = container.createDiv();
topRow.addClass("mermaid-toolbar-top-row");
let elementsContainer = container.createDiv();
elementsContainer.addClass(TOOLBAR_ELEMENTS_CONTAINER_CLASS_NAME);
elementsContainer.setAttr("id", TOOLBAR_ELEMENTS_CONTAINER_ID);
createDropdown(topRow, elementsContainer, items, selectedCategory, onCategoryChanged, onElementClick);
createTopRowBtns(topRow, topRowButtons);
await recreateElementsSection(elementsContainer, selectedCategory, items, onElementClick);
return container;
}
function createTopRowBtns(parentEl, buttons) {
buttons.forEach((btn) => {
let b = new import_obsidian4.ButtonComponent(parentEl).setClass("clickable-icon").setIcon(btn.iconName).setTooltip(btn.tooltip).onClick(btn.callback);
});
}
function createDropdown(parentEl, elementsContainer, items, selectedCategory, onSelectionChanged, onElClick) {
let categories = Object.keys(ElementCategory);
let dropdown = new import_obsidian4.DropdownComponent(parentEl);
categories.forEach((c) => {
dropdown.addOption(c, c);
});
dropdown.setValue(selectedCategory);
dropdown.onChange((val) => {
onSelectionChanged(val);
recreateElementsSection(elementsContainer, val, items, onElClick);
});
}
async function recreateElementsSection(sectionContainer, category, items, onElClick) {
sectionContainer.innerHTML = "";
let elemService = new MermaidElementService();
let mermaid = await (0, import_obsidian4.loadMermaid)();
let filteredSortedItems = items.filter((i) => i.category == category).sort((a, b) => a.sortingOrder - b.sortingOrder);
filteredSortedItems.forEach(async (elem, index) => {
let el = createToolbarElement(sectionContainer);
el.id = `mermaid-toolbar-element-${elem.category}-${index}`;
let { svg } = await mermaid.render(el.id, elemService.wrapAsCompleteDiagram(elem));
el.innerHTML = svg;
el.onclick = (e) => onElClick(elem.content);
sectionContainer.appendChild(el);
});
}
function createToolbarElement(parentEl) {
let itemEl = parentEl.createEl("pre");
itemEl.addClass(TOOLBAR_ELEMENT_CLASS_NAME);
return itemEl;
}
// src/ui/toolbarView/mermaidToolbarButtons.ts
var MermaidToolbarButton = class {
constructor(tooltip, iconName, callback) {
this.tooltip = tooltip;
this.iconName = iconName;
this.callback = callback;
}
};
// src/ui/toolbarView/mermaidToolbarView.ts
var _MermaidToolbarView = class extends import_obsidian5.ItemView {
constructor(leaf, plugin) {
super(leaf);
this.topRowButtons = [
new MermaidToolbarButton("insert Mermaid code block with sample diagram", "code-2", () => this.insertTextAtCursor(this._plugin._mermaidElementService.getSampleDiagram(this._plugin.settings.selectedCategory))),
new MermaidToolbarButton("open Mermaid.js documentation web page", "external-link", () => window.open("https://mermaid.js.org/intro/")),
new MermaidToolbarButton("open settings", "settings", () => {
this.app.setting.open();
this.app.setting.openTabById("mermaid-tools");
})
];
this._plugin = plugin;
this.items = plugin.settings.elements;
this.containerEl.children[1].addClass("mermaid-toolbar-container");
}
async onOpen() {
await this.recreateToolbar(this._plugin.settings.selectedCategory);
}
async onClose() {
}
async recreateToolbar(selectedCategory) {
const container = this.containerEl.children[1];
container.empty();
let toolbarElement = await createMermaidToolbar(this.topRowButtons, this.items, selectedCategory, async (newCat) => {
this._plugin.settings.selectedCategory = newCat;
this._plugin.saveSettings();
await this.recreateToolbar(this._plugin.settings.selectedCategory);
}, (text) => this.insertTextAtCursor(text));
container.appendChild(toolbarElement);
}
insertTextAtCursor(text) {
this._plugin.insertTextAtCursor(text);
}
getViewType() {
return _MermaidToolbarView.VIEW_TYPE;
}
getDisplayText() {
return _MermaidToolbarView.VIEW_DESCRIPTION;
}
getIcon() {
return TRIDENT_ICON_NAME;
}
};
var MermaidToolbarView = _MermaidToolbarView;
MermaidToolbarView.VIEW_TYPE = "mermaid-toolbar-view";
MermaidToolbarView.VIEW_DESCRIPTION = "Mermaid Toolbar";
// main.ts
var TRIDENT_ICON_NAME = "trident-custom";
var MermaidPlugin = class extends import_obsidian6.Plugin {
constructor() {
super(...arguments);
this._mermaidElementService = new MermaidElementService();
this._textEditorService = new TextEditorService();
}
async onload() {
await this.loadSettings();
addTridentIcon();
this.registerView(MermaidToolbarView.VIEW_TYPE, (leaf) => new MermaidToolbarView(leaf, this));
this.app.workspace.on("active-leaf-change", (leaf) => {
var _a, _b;
this.activeEditor = (_b = (_a = this.app.workspace.activeEditor) == null ? void 0 : _a.editor) != null ? _b : this.activeEditor;
});
this.addRibbonIcon(TRIDENT_ICON_NAME, "Open Mermaid Toolbar", () => {
this.activateView();
});
this.addCommand({
id: "open-toolbar",
name: "Open Toolbar View",
callback: () => {
this.activateView();
}
});
this.addSettingTab(new MermaidToolsSettingsTab(this.app, this));
}
async onunload() {
this.app.workspace.detachLeavesOfType(MermaidToolbarView.VIEW_TYPE);
}
async loadSettings() {
this.settings = Object.assign({}, MermaidPluginSettings.DefaultSettings(), await this.loadData());
this.addNewCategories();
}
addNewCategories() {
if (!this.settings.elements.some((x) => x.category === "Mindmap" /* Mindmap */)) {
this.settings.elements.push(...mindMapElements);
console.log("[Mermaid Tools] added Mindmap elements");
}
;
if (!this.settings.elements.some((x) => x.category === "Timeline" /* Timeline */)) {
this.settings.elements.push(...timelineElements);
console.log("[Mermaid Tools] added Timeline elements");
}
;
if (!this.settings.elements.some((x) => x.category === "QuadrantChart" /* QuadrantChart */)) {
this.settings.elements.push(...quadrantElements);
console.log("[Mermaid Tools] added QuadrantChart elements");
}
;
if (!this.settings.elements.some((x) => x.category === "C4Diagram" /* C4Diagram */)) {
this.settings.elements.push(...c4DiagramElements);
console.log("[Mermaid Tools] added C4 diagram elements");
}
;
}
async saveSettings() {
await this.saveData(this.settings);
await this.activateView();
}
async activateView() {
this.app.workspace.detachLeavesOfType(MermaidToolbarView.VIEW_TYPE);
await this.app.workspace.getRightLeaf(false).setViewState({
type: MermaidToolbarView.VIEW_TYPE,
active: true
});
this.app.workspace.revealLeaf(this.app.workspace.getLeavesOfType(MermaidToolbarView.VIEW_TYPE)[0]);
}
insertTextAtCursor(text) {
this._textEditorService.insertTextAtCursor(this.activeEditor, text);
}
};