Skip to content

Commit 9f38839

Browse files
committed
Add basic mermaid diagram docs, update lockfile
1 parent 1145ad2 commit 9f38839

2 files changed

Lines changed: 52 additions & 2 deletions

File tree

episodes/episodes.Rmd

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -990,6 +990,8 @@ The reasons the others were incorrect is:
990990

991991
## Figures
992992

993+
### Standard Markdown Figures
994+
993995
To include figures, place them in the `episodes/fig` folder and reference them
994996
directly like so using standard markdown format, with one twist: add an `alt`
995997
attribute at the end to make it accessible like this:
@@ -1072,6 +1074,54 @@ pie(
10721074
)
10731075
```
10741076

1077+
### Mermaid Diagrams
1078+
1079+
[Mermaid diagrams](https://mermaid-js.github.io/mermaid/#/) can be included in lessons by using the `mermaid` fenced div and a code fragment the mermaid syntax.
1080+
1081+
The following example creates a simple flowchart:
1082+
```
1083+
flowchart LR
1084+
accTitle: {A short figure title}
1085+
accDescr: {A longer description of the figure, highlighting important elements}
1086+
A(1. Step A)
1087+
A --> B(2. Step B)
1088+
C("`3. Step C
1089+
- A thing
1090+
- Another thing
1091+
- Something else`")
1092+
B --> C
1093+
C --> D(4. Step D)
1094+
```
1095+
1096+
The resulting mermaid diagram will be rendered as:
1097+
1098+
```mermaid
1099+
flowchart LR
1100+
accTitle: {A short figure title}
1101+
accDescr: {A longer description of the figure, highlighting important elements}
1102+
A(1. Step A)
1103+
A --> B(2. Step B)
1104+
C("`3. Step C
1105+
- A thing
1106+
- Another thing
1107+
- Something else`")
1108+
B --> C
1109+
C --> D(4. Step D)
1110+
```
1111+
1112+
::::::::::::::::::::: callout
1113+
1114+
### Accessibility of Mermaid Diagrams
1115+
1116+
Note that both the `accTitle` and `accDescr` fields in the mermaid code block need to be supplied to produce an accessible figure caption!
1117+
1118+
`accTitle` provides a short title for the figure, and `accDescr` provides a longer form description of the figure that highlights important elements.
1119+
1120+
Both of these fields are read by screen readers to provide an accessible description of the figure.
1121+
1122+
:::::::::::::::::::::::::::::
1123+
1124+
10751125
## Math
10761126

10771127
One of our episodes contains $\LaTeX$ equations when describing how to create dynamic reports with {knitr}, so we now use mathjax to describe this:

renv/profiles/lesson-requirements/renv.lock

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"R": {
3-
"Version": "4.5.3",
3+
"Version": "4.5.2",
44
"Repositories": [
55
{
66
"Name": "carpentries",
@@ -725,7 +725,7 @@
725725
"Config/testthat/start-first": "bioconductor,python,install,restore,snapshot,retrieve,remotes",
726726
"Author": "Kevin Ushey [aut, cre] (ORCID: <https://orcid.org/0000-0003-2880-7407>), Hadley Wickham [aut] (ORCID: <https://orcid.org/0000-0003-4757-117X>), Posit Software, PBC [cph, fnd]",
727727
"Maintainer": "Kevin Ushey <kevin@rstudio.com>",
728-
"Repository": "https://packagemanager.posit.co/cran/__linux__/jammy/latest"
728+
"Repository": "RSPM"
729729
},
730730
"rlang": {
731731
"Package": "rlang",

0 commit comments

Comments
 (0)