Replies: 30 comments 1 reply
-
|
收到，这周比较忙，可能要下周解决。 |
Beta Was this translation helpful? Give feedback.
-
|
今天翻了翻文档，找了找相关内容 mermaid 内置主题列表 https://mermaid.js.org/config/theming.html#available-themes 更改 mermaid 主题 有两种方法 第一种方法（看起来不如第二种有效，部分未生效，可能已弃用）文档：https://mermaid.js.org/config/configuration.html#frontmatter-config 例 ---
title: Hello Title
config:
theme: forest
---
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end---
title: Hello Title
config:
theme: forest
---
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
---
title: Hello Title
config:
theme: forest
themeVariables:
primaryColor: "#BB2528"
primaryTextColor: "#fff"
primaryBorderColor: "#7C0000"
lineColor: "#F8B229"
secondaryColor: "#006100"
tertiaryColor: "#fff"
---
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end---
---
title: Hello Title
config:
theme: forest
themeVariables:
primaryColor: "#BB2528"
primaryTextColor: "#fff"
primaryBorderColor: "#7C0000"
lineColor: "#F8B229"
secondaryColor: "#006100"
tertiaryColor: "#fff"
---
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
第二种方法文档：https://mermaid.js.org/config/theming.html#diagram-specific-themes 例 %%{init: { "theme": "forest" } }%%
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end%%{init: { "theme": "forest" } }%%
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#BB2528',
'primaryTextColor': '#fff',
'primaryBorderColor': '#7C0000',
'lineColor': '#F8B229',
'secondaryColor': '#006100',
'tertiaryColor': '#fff'
}
}
}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#BB2528',
'primaryTextColor': '#fff',
'primaryBorderColor': '#7C0000',
'lineColor': '#F8B229',
'secondaryColor': '#006100',
'tertiaryColor': '#fff'
}
}
}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
|
Beta Was this translation helpful? Give feedback.
-
|
还有一种方法，就是 init Vditor 插件引入 mermaid 好像就只是引入了 js，没看到啥 initialize plugin-text-diagram 有加入以下代码， document.addEventListener("DOMContentLoaded", function() {
const postBody = document.body
mermaid.initialize({
startOnLoad: false,
});
mermaid.run({
querySelector: '插件设置',
});
});可以尝试给这个插件提 issue，加入 theme 描述 https://mermaid.js.org/config/theming.html#site-wide-theme document.addEventListener("DOMContentLoaded", function() {
const postBody = document.body
mermaid.initialize({
startOnLoad: false,
theme: 'forest',
});
mermaid.run({
querySelector: '插件设置',
});
}); |
Beta Was this translation helpful? Give feedback.
-
|
建议直接在 mermaid 开头加入主题信息来修改 mermaid.initialize({
startOnLoad: false,
theme: 'forest',
});我试了半天也没弄成功， |
Beta Was this translation helpful? Give feedback.
-
我也配了半天，不大好配，都有点问题。还是插件或者主题有内置，可以自动切换好 mermaid 官方文档中的渲染块，就是其自动切换的（点击文档的明暗模式切换时会发现渲染也自动切换） |
Beta Was this translation helpful? Give feedback.
-
|
插件 ISSUE - halo-sigs/plugin-text-diagram#17 |
Beta Was this translation helpful? Give feedback.
-
|
想到一个绝妙的方法，能兼容切换主题按钮，实现中 |
Beta Was this translation helpful? Give feedback.
-
|
好了 github action 构建好的包解压，选文件名带 cn 的 zip 上传到后台就可以用了 默认编辑器还不能用，感觉那个插件有问题，具体症状是 f5 刷新下就好 vditor 编辑器内嵌的 mermaid 的就能正常工作，试试就知道了，折腾我半天 干脆我自己来内嵌一个 mermaid 的 css 好了，反正这里做了支持 感觉要给那个插件提个 issue |
Beta Was this translation helpful? Give feedback.
-
|
测试下来好像有 bug： 默认是亮色： 切换到暗色： 刷新页面后的暗色： 我使用的是默认的 editor： 这需要升级 halo 版本么？ |
Beta Was this translation helpful? Give feedback.
-
|
我看这个在 vditor 里写的时候，现象和上面的默认编辑器是一样的，下面是 vditor 编辑器的内容： 
|
Beta Was this translation helpful? Give feedback.
-
vditor 我用的是分屏预览，这样的 |
Beta Was this translation helpful? Give feedback.
-
我在主题里面主动引入也会有和 用 https://github.com/halo-sigs/plugin-text-diagram 一样的问题， |
Beta Was this translation helpful? Give feedback.
-
|
修订了下，在 vditor 里添加更简单了，也贴近原本的方式 |
Beta Was this translation helpful? Give feedback.
-
|
有关 vditor 那边渲染的代码 halo-plugin-vditor function setCDN(cdn) {
this.CDN = cdn;
}
elId="vditor-article-sign"
Vditor.setContentTheme(darkMode?"dark":"light", THEME_PREFIX)
let root = document.getElementById(elId)
const renderTheme = darkMode?"dark":"classic"
Vditor.mermaidRender(root, this.CDN, renderTheme)vditor declare const mermaid: {
initialize(options: any): void,
render(id: string, text: string): { svg: string }
};
export const mermaidRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN, theme: string) => {
const mermaidElements = mermaidRenderAdapter.getElements(element);
if (mermaidElements.length === 0) {
return;
}
addScript(`${cdn}/dist/js/mermaid/mermaid.min.js`, "vditorMermaidScript").then(() => {
const config: any = {
securityLevel: "loose", // 升级后无 https://github.com/siyuan-note/siyuan/issues/3587，可使用该选项
altFontFamily: "sans-serif",
fontFamily: "sans-serif",
startOnLoad: false,
flowchart: {
htmlLabels: true,
useMaxWidth: !0
},
sequence: {
useMaxWidth: true,
diagramMarginX: 8,
diagramMarginY: 8,
boxMargin: 8,
showSequenceNumbers: true // Mermaid 时序图增加序号 https://github.com/siyuan-note/siyuan/pull/6992 https://mermaid.js.org/syntax/sequenceDiagram.html#sequencenumbers
},
gantt: {
leftPadding: 75,
rightPadding: 20
}
};
if (theme === "dark") {
config.theme = "dark";
}
mermaid.initialize(config);
mermaidElements.forEach(async (item) => {
const code = mermaidRenderAdapter.getCode(item);
if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
return;
}
const id = "mermaid" + genUUID()
try {
const mermaidData = await mermaid.render(id, item.textContent);
item.innerHTML = mermaidData.svg;
} catch (e) {
const errorElement = document.querySelector("#" + id);
item.innerHTML = `${errorElement.outerHTML}<br>
<div style="text-align: left"><small>${e.message.replace(/\n/, "<br>")}</small></div>`;
errorElement.parentElement.remove();
}
item.setAttribute("data-processed", "true");
});
});
}; |
Beta Was this translation helpful? Give feedback.
-
|
参考了下，给页面嵌入一段代码 <script type="module">
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
function genUUID() {
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
(c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
);
}
mermaid.initialize({ startOnLoad: false });
const mermaidElements = document.querySelectorAll(".content .language-mermaid");
mermaidElements.forEach(async (item) => {
const code = item.textContent;
if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
return;
}
const id = "mermaid" + genUUID();
mermaid
.render(id, item.textContent)
.then((mermaidData) => {
item.innerHTML = mermaidData.svg;
})
.catch((e) => {
const errorElement = document.querySelector("#" + id);
item.innerHTML = `${errorElement.outerHTML}<br>
<div style="text-align: left"><small>${e.message.replace(/\n/, "<br>")}</small></div>`;
errorElement.parentElement.remove();
});
item.setAttribute("data-processed", "true");
});
</script>在默认编辑器插入这段 html 代码，效果很棒 <div class="language-mermaid dark">
%%{init: { "theme": "dark" } }%%
flowchart TD
A(("`**Open (Network)**`")) -->|组成部分| RSSHub{RSSHub}
A -->|组成部分| RSS3{RSS3}
A -->|组成部分| Crossbell{Crossbell}
</div>
<div class="language-mermaid light">
%%{init: { "theme": "light" } }%%
flowchart TD
A(("`**Open (Network)**`")) -->|组成部分| RSSHub{RSSHub}
A -->|组成部分| RSS3{RSS3}
A -->|组成部分| Crossbell{Crossbell}
</div> |
Beta Was this translation helpful? Give feedback.
-
我填入的是 --> 会自动转译成 --> |
Beta Was this translation helpful? Give feedback.
-
我尝试了一下，在默认编辑器的 html 块，插入这个代码，然后无刷新，mermaid 的明暗切换是正常的。不过作为用户要 copy 这么一大坨代码，感觉不是很合适，我感觉理想效果是：
看插件侧那边能实现么？ |
Beta Was this translation helpful? Give feedback.
-
https://github.com/HowieHz/halo-theme-higan-hz/actions/runs/12273290226 现在 90% 完成度了，到现在 现在还有两个要点要完成，我完成就发新版了
我说的 意思是 默认编辑器的只需要插入 <div class="mermaid auto">
flowchart TD
A(("`**Open (Network)**`")) -->|组成部分| RSSHub{RSSHub}
A -->|组成部分| RSS3{RSS3}
A -->|组成部分| Crossbell{Crossbell}
</div>vditor 编辑器只需要像往常一样 就能自动生成明暗两种的 |
Beta Was this translation helpful? Give feedback.
-
文本绘图插件 支持我这种无刷新的切换明暗 /* language-mermaid style start */
/* 默认样式 第一二行适配 halo-plugin-vditor 第三行适配 plugin-text-diagram （plugin-text-diagram 实际会渲染错误，但是消失显示逻辑没问题）*/
article .content div.light,
article .content div.dark,
article .content text-diagram[data-type="mermaid"] {
display: none;
}
/* 自动模式 */
@media (prefers-color-scheme: no-preference) {
html[data-color-scheme="auto"] article .content div.light,
html[data-color-scheme="auto"] article .content text-diagram[data-type="mermaid"].light {
display: block;
}
}
@media (prefers-color-scheme: light) {
html[data-color-scheme="auto"] article .content div.light,
html[data-color-scheme="auto"] article .content text-diagram[data-type="mermaid"].light {
display: block;
}
}
@media (prefers-color-scheme: dark) {
html[data-color-scheme="auto"] article .content div.dark,
html[data-color-scheme="auto"] article .content text-diagram[data-type="mermaid"].dark {
display: block;
}
}
/* 明亮模式 */
html[data-color-scheme="light"] article .content div.light,
html[data-color-scheme="light"] article .content text-diagram[data-type="mermaid"].light {
display: block;
}
/* 暗黑模式 */
html[data-color-scheme="dark"] article .content div.dark,
html[data-color-scheme="dark"] article .content text-diagram[data-type="mermaid"].dark {
display: block;
}
/* language-mermaid style end */head 嵌入这么一段 <!--/* Mermaid */-->
<script type="module" th:inline="javascript" th:if="${theme.config?.global?.is_mermaid_enable}">
import mermaid from /*[[${theme.config?.global?.mermaid_script_url}]]*/ "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
function genUUID() {
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
(c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
);
}
const config = /*[(${theme.config?.global?.mermaid_config})]*/ { startOnLoad: false };
mermaid.initialize(config);
const mermaidElements = document.querySelectorAll(
/*[[${theme.config?.global?.mermaid_selector}]]*/ ".content .mermaid"
);
mermaidElements.forEach(async (item) => {
const code = item.textContent;
if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
return;
}
const id = "mermaid" + genUUID();
mermaid
.render(id, item.textContent)
.then((mermaidData) => {
item.innerHTML = mermaidData.svg;
})
.catch((e) => {
const errorElement = document.querySelector("#" + id);
item.innerHTML = `${errorElement.outerHTML}<br>
<div style="text-align: left"><small>${e.message.replace(/\n/, "<br>")}</small></div>`;
errorElement.parentElement.remove();
});
item.setAttribute("data-processed", "true");
});
</script>再加一段代码，上面的 js 要改下，检测到自动生成两份，一份带 class="dark" 的暗主题图片，一份带 class="light" 的亮主题图片，就没问题了。 |
Beta Was this translation helpful? Give feedback.
-
|
@HowieHz 可以的，看起来用户侧直接写 mermaid 就好 |
Beta Was this translation helpful? Give feedback.
-
|
@jalr4ever https://github.com/HowieHz/halo-theme-higan-hz/actions/runs/12277203690 |
Beta Was this translation helpful? Give feedback.
-
|
@HowieHz 🚀 按照主页测试了 1.16.0 版本，测试可行！ |
Beta Was this translation helpful? Give feedback.
-
|
有个 bug，在主题的 1.16.0 版本下，实际测试了一下博客的文章内容如下 mermaid，在暗色模式下渲染的时候，发现箭头少了，而亮色模式下是有的： 
|
Beta Was this translation helpful? Give feedback.
-
只能和 mermaid 和解，自己调样式啥的 总体配置下 mermaid config 属性填入下面的值再试试 上面这段是从 vditor 抄来的 |
Beta Was this translation helpful? Give feedback.
-
|
@HowieHz 不大理解这个，意思是这个属于 mermaid 的问题？ |
Beta Was this translation helpful? Give feedback.
-
填入这段后，暗色的渲染效果还是和上面的问题一样的 |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
加了个变量，变成 ---
config:
themeVariables:
signalColor: "#BB2528"
---
sequenceDiagram
participant User
participant DataConnector
participant DataLoader
participant Metadata
participant Synthesizer
participant DataProcessor
participant Model
participant Evaluator
User->>DataConnector: create_connector()
DataConnector-->>DataLoader: connector
User->>DataLoader: load_data()
DataLoader->>Metadata: from_dataloader()
User->>Synthesizer: fit(metadata)
Synthesizer->>DataProcessor: convert(data)
DataProcessor-->>Synthesizer: processed_data
Synthesizer->>Model: fit(metadata, processed_data)
Model-->>Synthesizer: trained_model
User->>Synthesizer: sample(n_samples)
Synthesizer->>Model: generate()
Model-->>Synthesizer: synthetic_data
Synthesizer->>DataProcessor: reverse_convert(synthetic_data)
DataProcessor-->>Synthesizer: restored_data
Synthesizer-->>User: restored_data
User->>Evaluator: evaluate(real_data, restored_data)
Evaluator-->>User: evaluation_results
问题依旧，还有我发现，标记的数字也没了，不知道咋回事。刚刚学会咋看 svg 这标签，不太熟为啥会这样
|
Beta Was this translation helpful? Give feedback.
-
|
感觉 mermaid 折腾渲染 svg 成本还不小，今天我想到一个方案：你感觉渲染 mermaid 为 JPG 靠谱么？ 因为现在亮色模式的 mermaid 渲染是正常的嘛，那每次都将图片渲染为 1080P 的 JPG ，然后暗色模式显示的也是白底的图片，毕竟主题现在的代码块在暗色模式下也是白底嘛 |
Beta Was this translation helpful? Give feedback.
-
当然，如果能渲染出一个白底的 SVG，那占用的空间就更小了，但我不了解这个技术是否可行？ |
Beta Was this translation helpful? Give feedback.
-
添加一下，允许给 svg 加个底色 |
Beta Was this translation helpful? Give feedback.
-
现象
不知道这个是 halo2 自带的渲染还是主题层能做控制，这块有相关的解决方案么？
我在博客中使用了 mermaid，对应 halo2.0 编辑器的文本绘图功能，但是在夜间模式，这里跟随背景，渲染出来看不清楚：
而代码块的渲染则是反转色，不会有此问题：
期望
mermaid 渲染同代码块，具备反转色渲染，日间模式和夜间模式都能看地清楚
Beta Was this translation helpful? Give feedback.
All reactions