From 3583df9d1c09f1735995d50f67df9e8be2080531 Mon Sep 17 00:00:00 2001 From: ngocptblaplafla Date: Wed, 2 Oct 2024 11:52:02 +0700 Subject: [PATCH 1/6] add params for mmdc --- _extensions/diagram/diagram.lua | 25 ++++++++++++++++++++----- test/expected-mermaid.html | 2 +- test/input-mermaid.md | 13 +++++++++++++ test/test-mermaid.yaml | 6 +++++- 4 files changed, 39 insertions(+), 7 deletions(-) diff --git a/_extensions/diagram/diagram.lua b/_extensions/diagram/diagram.lua index c2e8879..6ca4b0d 100644 --- a/_extensions/diagram/diagram.lua +++ b/_extensions/diagram/diagram.lua @@ -155,12 +155,27 @@ local mermaid = { return with_working_directory(tmpdir, function () local infile = 'diagram.mmd' local outfile = 'diagram.' .. file_extension + local args = {"--pdfFit", "--input", infile, "--output", outfile} + if self.opt then + if self.opt.theme then + table.insert(args, '--theme' .. stringify(self.opt.theme)) + table.insert(args, stringify(self.opt.cssFile)) + end + if self.opt.configFile then + table.insert(args, '--configFile') + table.insert(args, stringify(self.opt.configFile)) + end + if self.opt.cssFile then + table.insert(args, '--cssFile' .. stringify(self.opt.cssFile)) + table.insert(args, stringify(self.opt.cssFile)) + end + if self.opt.puppeteerConfigFile then + table.insert(args, '--puppeteerConfigFile') + table.insert(args, stringify(self.opt.puppeteerConfigFile)) + end + end write_file(infile, code) - pipe( - self.execpath or 'mmdc', - {"--pdfFit", "--input", infile, "--output", outfile}, - '' - ) + pipe(self.execpath or 'mmdc', args,'') return read_file(outfile), mime_type end) end) diff --git a/test/expected-mermaid.html b/test/expected-mermaid.html index 13b7f2e..a78331c 100644 --- a/test/expected-mermaid.html +++ b/test/expected-mermaid.html @@ -1,6 +1,6 @@

Mermaid

Mermaid is a JavaScript-based diagramming and charting tool.

-A simple flowchart. +A simple flowchart.
diff --git a/test/input-mermaid.md b/test/input-mermaid.md index c16c16d..073eef8 100644 --- a/test/input-mermaid.md +++ b/test/input-mermaid.md @@ -5,6 +5,19 @@ Mermaid is a JavaScript-based diagramming and charting tool. ``` mermaid %%| filename: flowchart %%| fig-cap: A simple flowchart. +%%{ + init: { + 'theme': 'base', + 'themeVariables': { + 'primaryColor': '#BB2528', + 'primaryTextColor': '#fff', + 'primaryBorderColor': '#7C0000', + 'lineColor': '#F8B229', + 'secondaryColor': '#006100', + 'tertiaryColor': '#fff' + } + } +}%% graph TD; A-->B; A-->C; diff --git a/test/test-mermaid.yaml b/test/test-mermaid.yaml index bc5d98f..e73427c 100644 --- a/test/test-mermaid.yaml +++ b/test/test-mermaid.yaml @@ -5,6 +5,10 @@ to: html metadata: pagetitle: Mermaid diagram diagram: - cache: false + engine: + mermaid: + execpath: /usr/local/bin/mmdc + puppeteerConfigFile: /etc/puppeteer-conf.json variables: document-css: false +embed-resources: true From 1fac4d4f1f2ae47259b7b7124707362e5cf81fd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Phan=20Thanh=20Ng=E1=BB=8Dc?= Date: Tue, 8 Oct 2024 09:41:02 +0700 Subject: [PATCH 2/6] Update expected-mermaid.html --- test/expected-mermaid.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/expected-mermaid.html b/test/expected-mermaid.html index a78331c..13b7f2e 100644 --- a/test/expected-mermaid.html +++ b/test/expected-mermaid.html @@ -1,6 +1,6 @@

Mermaid

Mermaid is a JavaScript-based diagramming and charting tool.

-A simple flowchart. +A simple flowchart.
From 241f0f90f5463f7864f13db2608c23716b5ab08f Mon Sep 17 00:00:00 2001 From: ms-afk <58094448+ms-afk@users.noreply.github.com> Date: Thu, 28 Aug 2025 16:45:48 +0200 Subject: [PATCH 3/6] test: restored mermaid test files --- test/input-mermaid.md | 13 ------------- test/test-mermaid.yaml | 6 +----- 2 files changed, 1 insertion(+), 18 deletions(-) diff --git a/test/input-mermaid.md b/test/input-mermaid.md index 073eef8..c16c16d 100644 --- a/test/input-mermaid.md +++ b/test/input-mermaid.md @@ -5,19 +5,6 @@ Mermaid is a JavaScript-based diagramming and charting tool. ``` mermaid %%| filename: flowchart %%| fig-cap: A simple flowchart. -%%{ - init: { - 'theme': 'base', - 'themeVariables': { - 'primaryColor': '#BB2528', - 'primaryTextColor': '#fff', - 'primaryBorderColor': '#7C0000', - 'lineColor': '#F8B229', - 'secondaryColor': '#006100', - 'tertiaryColor': '#fff' - } - } -}%% graph TD; A-->B; A-->C; diff --git a/test/test-mermaid.yaml b/test/test-mermaid.yaml index e73427c..bc5d98f 100644 --- a/test/test-mermaid.yaml +++ b/test/test-mermaid.yaml @@ -5,10 +5,6 @@ to: html metadata: pagetitle: Mermaid diagram diagram: - engine: - mermaid: - execpath: /usr/local/bin/mmdc - puppeteerConfigFile: /etc/puppeteer-conf.json + cache: false variables: document-css: false -embed-resources: true From 5951106fd39af6dfe43a1bcd14cb876cc305e5f3 Mon Sep 17 00:00:00 2001 From: ms-afk <58094448+ms-afk@users.noreply.github.com> Date: Thu, 28 Aug 2025 16:48:31 +0200 Subject: [PATCH 4/6] feat: added and fixed various mermaid options + docs and tests --- README.md | 37 ++++++++++++++++++++ _extensions/diagram/diagram.lua | 62 ++++++++++++++++++++------------- test/cssFile.css | 0 test/mermaidConfig.json | 1 + test/puppeteerConfig.json | 1 + test/test-mermaid.yaml | 9 +++++ 6 files changed, 85 insertions(+), 25 deletions(-) create mode 100644 test/cssFile.css create mode 100644 test/mermaidConfig.json create mode 100644 test/puppeteerConfig.json diff --git a/README.md b/README.md index 3b18348..2453393 100644 --- a/README.md +++ b/README.md @@ -231,6 +231,43 @@ diagram: --- ``` +#### Mermaid + +The Mermaid engine accepts various options corresponding to +a subset of the options that the `mmdc` command can take: + +- `theme`: passes its value to `--theme` +- `background-color`: passes its value to `--backgroundColor` +- `config-file`: passes its value to `--configFile` +- `css-file`: passes its value to `--cssFile` +- `scale`: passes its value to `--scale` +- `puppeteer-config-file`: passes its value to `--puppeteerConfigFile` +- `icon-packs`: passes its value to `--iconPacks` + +For more in-depth information on the meaning and format of every +option, use `mmdc --help`. + +*Note* that for options that need to receive a file (e.g. `config-file`), relative paths can be used. +However they will be *relative to the working directory used when calling the `pandoc` +executable*, not to the directory of the file that contains the metadata block. + +Example: + +``` yaml +--- +diagram: + engine: + mermaid: + theme: forest + background-color: white + config-file: mermaidConfig.json + css-file: cssFile.css + scale: 1 + puppeteer-config-file: puppeteerConfig.json + icon-packs: "@iconify-json/logos" +--- +``` + Security -------- diff --git a/_extensions/diagram/diagram.lua b/_extensions/diagram/diagram.lua index add0bbc..0aa2323 100644 --- a/_extensions/diagram/diagram.lua +++ b/_extensions/diagram/diagram.lua @@ -152,32 +152,44 @@ local mermaid = { local mime_type = self.mime_type or 'image/svg+xml' local file_extension = extension_for_mimetype[mime_type] return with_temporary_directory("diagram", function (tmpdir) - return with_working_directory(tmpdir, function () - local infile = 'diagram.mmd' - local outfile = 'diagram.' .. file_extension - local args = {"--pdfFit", "--input", infile, "--output", outfile} - if self.opt then - if self.opt.theme then - table.insert(args, '--theme' .. stringify(self.opt.theme)) - table.insert(args, stringify(self.opt.cssFile)) - end - if self.opt.configFile then - table.insert(args, '--configFile') - table.insert(args, stringify(self.opt.configFile)) - end - if self.opt.cssFile then - table.insert(args, '--cssFile' .. stringify(self.opt.cssFile)) - table.insert(args, stringify(self.opt.cssFile)) - end - if self.opt.puppeteerConfigFile then - table.insert(args, '--puppeteerConfigFile') - table.insert(args, stringify(self.opt.puppeteerConfigFile)) - end + local infile = tmpdir .. '/diagram.mmd' + local outfile = tmpdir .. '/diagram.' .. file_extension + --- Configure options for mmdc based on engine options + local args = {'--pdfFit', '--input', infile, '--output', outfile} + setmetatable(args, {__index = {insert = table.insert}}) + if self.opt then + if self.opt['theme'] then + args:insert('--theme') + args:insert(stringify(self.opt['theme'])) end - write_file(infile, code) - pipe(self.execpath or 'mmdc', args,'') - return read_file(outfile), mime_type - end) + if self.opt['background-color'] then + args:insert('--backgroundColor') + args:insert(stringify(self.opt['background-color'])) + end + if self.opt['config-file'] then + args:insert('--configFile') + args:insert(stringify(self.opt['config-file'])) + end + if self.opt['css-file'] then + args:insert('--cssFile') + args:insert(stringify(self.opt['css-file'])) + end + if self.opt['scale'] then + args:insert('--scale') + args:insert(stringify(self.opt['scale'])) + end + if self.opt['puppeteer-config-file'] then + args:insert('--puppeteerConfigFile') + args:insert(stringify(self.opt['puppeteer-config-file'])) + end + if self.opt['icon-packs'] then + args:insert('--iconPacks') + args:insert(stringify(self.opt['icon-packs'])) + end + end + write_file(infile, code) + pipe(self.execpath or 'mmdc', args, '') + return read_file(outfile), mime_type end) end, } diff --git a/test/cssFile.css b/test/cssFile.css new file mode 100644 index 0000000..e69de29 diff --git a/test/mermaidConfig.json b/test/mermaidConfig.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/test/mermaidConfig.json @@ -0,0 +1 @@ +{} diff --git a/test/puppeteerConfig.json b/test/puppeteerConfig.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/test/puppeteerConfig.json @@ -0,0 +1 @@ +{} diff --git a/test/test-mermaid.yaml b/test/test-mermaid.yaml index bc5d98f..b4df10b 100644 --- a/test/test-mermaid.yaml +++ b/test/test-mermaid.yaml @@ -6,5 +6,14 @@ metadata: pagetitle: Mermaid diagram diagram: cache: false + engine: + mermaid: + theme: forest + background-color: white + config-file: test/mermaidConfig.json + css-file: test/cssFile.css + scale: 1 + puppeteer-config-file: test/puppeteerConfig.json + icon-packs: "@iconify-json/logos" variables: document-css: false From 31ac932a69932ad36f13f7ea38ad5f8031e3357d Mon Sep 17 00:00:00 2001 From: ms-afk <58094448+ms-afk@users.noreply.github.com> Date: Thu, 18 Sep 2025 16:03:21 +0200 Subject: [PATCH 5/6] refactor: use Pandoc.List, replace repetitive code with loop --- _extensions/diagram/diagram.lua | 46 ++++++++++++--------------------- 1 file changed, 16 insertions(+), 30 deletions(-) diff --git a/_extensions/diagram/diagram.lua b/_extensions/diagram/diagram.lua index 0aa2323..05039de 100644 --- a/_extensions/diagram/diagram.lua +++ b/_extensions/diagram/diagram.lua @@ -154,37 +154,23 @@ local mermaid = { return with_temporary_directory("diagram", function (tmpdir) local infile = tmpdir .. '/diagram.mmd' local outfile = tmpdir .. '/diagram.' .. file_extension - --- Configure options for mmdc based on engine options - local args = {'--pdfFit', '--input', infile, '--output', outfile} - setmetatable(args, {__index = {insert = table.insert}}) + --- Configure options for mmdc based on engine options + local args = List{'--pdfFit', '--input', infile, '--output', outfile} if self.opt then - if self.opt['theme'] then - args:insert('--theme') - args:insert(stringify(self.opt['theme'])) - end - if self.opt['background-color'] then - args:insert('--backgroundColor') - args:insert(stringify(self.opt['background-color'])) - end - if self.opt['config-file'] then - args:insert('--configFile') - args:insert(stringify(self.opt['config-file'])) - end - if self.opt['css-file'] then - args:insert('--cssFile') - args:insert(stringify(self.opt['css-file'])) - end - if self.opt['scale'] then - args:insert('--scale') - args:insert(stringify(self.opt['scale'])) - end - if self.opt['puppeteer-config-file'] then - args:insert('--puppeteerConfigFile') - args:insert(stringify(self.opt['puppeteer-config-file'])) - end - if self.opt['icon-packs'] then - args:insert('--iconPacks') - args:insert(stringify(self.opt['icon-packs'])) + local options = { + ['theme'] = '--theme', + ['background-color'] = '--backgroundColor', + ['config-file'] = '--configFile', + ['css-file'] = '--cssFile', + ['scale'] = '--scale', + ['puppeteer-config-file'] = '--puppeteerConfigFile', + ['icon-packs'] = '--iconPacks', + } + for opt, cliopt in pairs(options) do + if self.opt[opt] then + args:insert(cliopt) + args:insert(stringify(self.opt[opt])) + end end end write_file(infile, code) From 4f203d080b7c0261cd6a225d0919542e8e48b5d4 Mon Sep 17 00:00:00 2001 From: ms-afk <58094448+ms-afk@users.noreply.github.com> Date: Thu, 18 Sep 2025 16:06:32 +0200 Subject: [PATCH 6/6] fix: use pandoc.path.join for better compatibility --- _extensions/diagram/diagram.lua | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_extensions/diagram/diagram.lua b/_extensions/diagram/diagram.lua index 05039de..01771ba 100644 --- a/_extensions/diagram/diagram.lua +++ b/_extensions/diagram/diagram.lua @@ -152,8 +152,8 @@ local mermaid = { local mime_type = self.mime_type or 'image/svg+xml' local file_extension = extension_for_mimetype[mime_type] return with_temporary_directory("diagram", function (tmpdir) - local infile = tmpdir .. '/diagram.mmd' - local outfile = tmpdir .. '/diagram.' .. file_extension + local infile = pandoc.path.join({tmpdir, 'diagram.mmd'}) + local outfile = pandoc.path.join({tmpdir, 'diagram.' .. file_extension}) --- Configure options for mmdc based on engine options local args = List{'--pdfFit', '--input', infile, '--output', outfile} if self.opt then