⬅️ **[[$-Tools|Tools]]** | **[[Obsidian]]**
***
# Obsidian - Diagrams
- [GitHub - PlantUML Support for Obsidian](https://github.com/joethei/obsidian-plantuml/)
- **Obsidian-Charts** [GitHub - Obsidian-Charts](https://github.com/phibr0/obsidian-charts)
- [Obsidian-Charts - Doku - Dataview Integration](https://charts.phibr0.de/Dataview%20Integration)
- using **ChartJS** e.g. [ChartJS - PolarArea](https://www.chartjs.org/docs/latest/charts/polar.html)
- using **dataviewjs** to manage data for diagrams [Gettings started with ChartJS](https://code.tutsplus.com/tutorials/getting-started-with-chartjs-radar-and-polar-area-charts--cms-28444)
- [YouTube - 20.11.2020 - Comprehensive Overview | Using Mermaid Flowcharts In Obsidian](https://www.youtube.com/watch?v=Tsu02d6Qti0)
- [00:00](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=0s) Intro
- [00:11](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=11s) Premise
- [00:48](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=48s) What is mermaid?
- [01:02](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=62s) The Mermaid live editor
- [01:08](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=68s) [https://github.com/mermaid-js/mermaid](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqblMycC16czFCSmZlSWdqWXg4Q0pVSHhSdW5Gd3xBQ3Jtc0tsbXRKaUdUbmI1SU13cTJEMlBTYlkyalNycmVCanBOVUhQSkNsNDF0UktfTzMtYjRRWGlhc2Y2Z1YwRm9uRldnZ2EtMEV5WTdZck1lM3R3YldSZHNOQjNOak16dzg1ZG1nUmtHaUNGSUdiV18xSU55QQ&q=https%3A%2F%2Fgithub.com%2Fmermaid-js%2Fmermaid&v=Tsu02d6Qti0)
- [01:16](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=76s) The Mermaid live editor ([https://bit.ly/2UGLgbZ](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbVVHbVpVN1MtdDNfS3luS1ByQjExTUpQbzBPQXxBQ3Jtc0tuTTk2Q3dLT0MzS2NuM1JEU29NT2NEYXZhQ1JNSjZMTmpoOWVfUzR6NWlSTlphcXJuamt2ME03bmlrMGVnU0l5VVhidExZdlJIc0dTV0dSUkkzaElzQWlQNnQ4M2ZqLWpqR0VOTEFadVpVclBiY2NJdw&q=https%3A%2F%2Fbit.ly%2F2UGLgbZ&v=Tsu02d6Qti0))
- [03:11](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=191s) [https://mermaid-js.github.io/mermaid/#/](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbmQtMzM1QmttWUlxa3lvSzkza0VvTU9OUTBNZ3xBQ3Jtc0tsNmgyNlFicEQ2LWhsbWhqVGlwOG9yUWxyV2xxNDBSNnUwNnNsN1VwWEJ1Y3MtbXlNeUFSZU5pUFZjVjZ3RkFPSHJMTmxkbFl2cmljLTZOS0EtODRnRmpGUDhscjRNakQxWDRMUlEtRlJzWTE4d21uMA&q=https%3A%2F%2Fmermaid-js.github.io%2Fmermaid%2F%23%2F&v=Tsu02d6Qti0)
- [05:26](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=326s) Pie chart diagrams
- [07:33](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=453s) The journey diagram
- [11:05](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=665s) Flow charts [
- 11:39](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=699s) Flow chart diagram orientations
- [12:14](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=734s) Line types in flow charts
- [13:07](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=787s) Text display over lines
- [14:13](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=853s) Branching in Flow charts
- [14:53](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=893s) Using IDs for your flow chart nodes
- [16:09](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=969s) Node shape syntax
- [18:17](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=1097s) Flow chart node shape options
- [21:56](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=1316s) Line Labels and Line types
- [26:16](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=1576s) Displaying Special Characters and those that break your diagrams
- [28:18](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=1698s) Subgraphs
- [30:00](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=1800s) Click actions on flowchart nodes
- [31:12](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=1872s) Click events to open Obsidian pages with URIs
- [34:42](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=2082s) Comments in Mermaid code
- [35:28](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=2128s) Custom styling in mermaid with CSS
- [39:36](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=2376s) Font Awesome support in mermaid
- [41:31](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=2491s) final words
- [41:41](https://www.youtube.com/watch?v=Tsu02d6Qti0&t=2501s) Outro
- With **Mermaid** [Mermaid](https://mermaid-js.github.io/mermaid/#/)
- [YouTube - 08.07.2020 - Obsidian Basics: Diagrams](https://www.youtube.com/watch?v=rXhUeV5Ko7g)
- [0:00](https://www.youtube.com/watch?v=rXhUeV5Ko7g&t=0s) Introduction
- [0:40](https://www.youtube.com/watch?v=rXhUeV5Ko7g&t=40s) Pie Charts
- [1:50](https://www.youtube.com/watch?v=rXhUeV5Ko7g&t=110s) Graphs / Flowcharts
- [2:18](https://www.youtube.com/watch?v=rXhUeV5Ko7g&t=138s) Directions
- [3:48](https://www.youtube.com/watch?v=rXhUeV5Ko7g&t=228s) Shapes
- [8:47](https://www.youtube.com/watch?v=rXhUeV5Ko7g&t=527s) Links
- [10:25](https://www.youtube.com/watch?v=rXhUeV5Ko7g&t=625s) Gantt Charts
- [12:07](https://www.youtube.com/watch?v=rXhUeV5Ko7g&t=727s) Sequence Diagrams
- [13:01](https://www.youtube.com/watch?v=rXhUeV5Ko7g&t=781s) Class Diagrams
- [13:35](https://www.youtube.com/watch?v=rXhUeV5Ko7g&t=815s) State Diagrams
- [14:38](https://www.youtube.com/watch?v=rXhUeV5Ko7g&t=878s) Entity Relationship Diagrams
- [16:00](https://www.youtube.com/watch?v=rXhUeV5Ko7g&t=960s) User Journey
```mermaid
pie title Users
"Mobile": 50
"Desktop": 40
"Tablet": 10
```
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
**Mit Plugin `Obsidian-Charts`**
test:: First Test
mark:: 6
```dataviewjs
const data = dv.current()
const chartData = {
type: 'bar',
data: {
labels: [data.test],
datasets: [{
label: 'Grades',
data: [data.mark],
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)'
],
borderWidth: 1
}]
}
}
window.renderChart(chartData, this.container);
```
| | Wert |
| ----------- | ---- |
| Werte | 2 |
| Gesundheit | 5 |
| Sport | 5 |
| Familie | 5 |
| Liebe | 5 |
| Bildung | 5 |
| Komfortzone | 5 |
| Finanzen | 5 |
^WoL
- mit Tabelle als Reference
```chart
type: polarArea
id: WoL
layout: columns
width: 50%
beginAtZero: true
labelColors: true
```
- Obsidian Charts mit ChartJs API
Gesundheit:: #WoL/Gesundheit/5
```dataviewjs
const data = dv.current()
const werte=(dv.pages('#WoL/Werte/1').length*1 +dv.pages('#WoL/Werte/2').length*2 +dv.pages('#WoL/Werte/3').length*3 +dv.pages('#WoL/Werte/4').length*4 +dv.pages('#WoL/Werte/5').length*5 +dv.pages('#WoL/Werte/6').length*6 +dv.pages('#WoL/Werte/7').length*7 +dv.pages('#WoL/Werte/8').length*8 +dv.pages('#WoL/Werte/9').length*9 +dv.pages('#WoL/Werte/10').length*10)/dv.pages('#WoL/Werte').length
// Einzelwert aus Markdown Formular aus verschachteltem Tag
const gesundheit=data.Gesundheit.match(/.*\/.*\/(.*)/)[1]
const chartData = {
type: 'polarArea',
data: {
labels: [
'Werte',
'Gesundheit',
'Sport',
'Familie',
'Liebe',
'Bildung',
'Komfortzone',
'Finanzen'
],
labelColors: true,
width: '50%',
datasets: [{
label: 'Grades',
data: [
werte,
gesundheit,
3,
4,
5,
6,
7,
8
],
backgroundColor: [
"rgba(255, 0, 0, 0.2)",
"rgba(100, 255, 0, 0.2)",
"rgba(200, 50, 255, 0.2)",
"rgba(0, 100, 255, 0.2)"
]
}]
}
}
window.renderChart(chartData, this.container);
```
#
***
References:
1. [YouTube - Obsidian Basics: Diagrams](https://www.youtube.com/watch?v=rXhUeV5Ko7g)
Related:
- [[Obsidian]]
- [[$-Ordnung|Ordnung]]