[{"content":"linux 网络 防火墙放行linux指定端口\n1 2 firewall-cmd --zone=public --add-port=8880/tcp --permanent firewall-cmd --reload 文本 监控文件后100行变化\n1 tail -100f mylog-2026-04.log 查找指定文件夹下文件(*.log)包含doer.ltd的\n1 2 find /home/logs/config -type f -exec grep \u0026#39;doer.ltd\u0026#39; {} + find /home/logs/config -type f -name \u0026#34;*.log\u0026#34; -exec grep -H \u0026#39;doer.ltd\u0026#39; {} + 其他 pm2启动程序\n1 2 pm2 start \u0026#34;dotnet /app/AnyUploader/AnyUploader.WebApi.dll\u0026#34; --name AnyUploader.WebApi pm2 save windows 网络 查看指定已连接过的wifi密码\n1 netsh wlan show profile name=\u0026#34;4G-MIFI-1DAF\u0026#34; key=clear Tools 网络 Wireshark过滤器\n1 (tcp.port == 34001 ||tcp.port == 34002||tcp.port == 34003) \u0026amp;\u0026amp; tcp.len\u0026gt;50 文本 notepad--中正则搜索既包含A又包含B又包含C又包含D的\n1 ^(?=.*A)(?=.*B)(?=.*C)(?=.*D).+$ ","date":"2026-04-14T00:00:00Z","permalink":"/p/%E5%B8%B8%E7%94%A8shell%E5%91%BD%E4%BB%A4/","title":"常用Shell命令"},{"content":"LDAP 相关概念 🔹 User DN（用户专有名称） 中文含义：用户的 Distinguished Name（专有名称）\n作用：唯一标识 LDAP 目录中某个具体用户的完整路径。\n典型格式：\n1 uid=johndoe,ou=users,dc=example,dc=com 使用场景：\n在身份认证过程中，系统通常会将用户输入的用户名（如 johndoe）拼接成完整的 User DN，然后使用该 DN 与用户提供的密码尝试绑定（Bind）到 LDAP 服务器，从而完成验证。\n✅ User DN = 用户的“完整门牌号” —— 精确指向目录中的一个实体。\n🔹 Base DN（基准专有名称） 中文含义：搜索操作的起始根节点\n作用：定义 LDAP 查询的搜索范围起点，所有子树查询均从此节点向下展开。\n典型格式：\ndc=example,dc=com → 对应域名 example.com ou=users,dc=example,dc=com → 限定在 users 组织单元下 类比理解：\n就像在文件系统中设置搜索路径为 C:\\Users —— 你不会去扫描 C:\\Windows，因为你的“搜索根目录”已限定在 Users。\n为何关键？\n设得太宽（如 dc=com）→ 搜索效率低，遍历无关数据； 设得太窄（如直接指定某用户）→ 可能找不到任何结果。 ✅ Base DN = 搜索的“辖区范围” —— 决定“我在哪片区域找人”。\nNextCloud集成LDAP 注意:社区版需要单独安装LDAP插件\n服务器 1: 填写LDAPIP，例如:198.168.1.2\n2: 填写用户DN例如：CN=doer-ldap,OU=Service Accounts,OU=Special Accounts,DC=doer,DC=com,DC=cn\n3:填写doer-ldap用户对应的密码\n4：填写BaseDB,例如:OU=BU_doer,OU=KS-FileSystem,OU=KS-Site,OU=DFS,OU=Group Accounts,DC=doer,DC=com,DC=cn\n用户 可以直接写LDAP查询: (\u0026amp;(|(objectclass=user)))\n登录属性 这里主要控制登录的时候从指定的表达式查询,其中%uid是NextCloud登录页面输入的用户名的占位符。\n例如： (\u0026amp;(\u0026amp;(|(objectclass=user)))(samaccountname=%uid)(department=*BU_doer*))\n注意：这里加了一个用户属性department的限制，我不知道为啥BaseDN限制不住，这里使用登录表达式限制指定部门登录\n群组 这里是限制NextCloud分配某个文件夹给组用的，例如：(\u0026amp;(objectClass=group)(objectCategory=group))\n高级 这里主要设置NextCloud用户相关的一些设定。比如用户名，账号，邮箱，上图中\n1表示使用用户属性的sn字段显示\n2表示是否显示其他的，如上配置在nextcloud中会显示张三(1008611)\n3表示按照什么搜索用户，我这里写的是工号和姓名搜索，多个使用分号分隔\n","date":"2026-04-13T00:00:00Z","permalink":"/p/nextcloud-ladp/","title":"NextCloud集成LDAP"},{"content":"Stack 主题还提供了一些自定义短代码来增强你的内容。\n引用 (Quote) quote 短代码允许你显示带有作者、来源和 URL 的引用。\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n― 一位名人, 他们写的书 用法 1 2 3 {{\u0026lt; quote author=\u0026#34;作者名字\u0026#34; source=\u0026#34;文章标题\u0026#34; url=\u0026#34;https://example.com\u0026#34; \u0026gt;}} 这里是引用内容。 {{\u0026lt; /quote \u0026gt;}} 视频 (Video) video 短代码允许你嵌入自托管或远程视频文件。\nYour browser doesn't support HTML5 video. Here is a link to the video instead. 用法 1 {{\u0026lt; video src=\u0026#34;https://example.com/video.mp4\u0026#34; \u0026gt;}} Bilibili 嵌入来自 Bilibili 的视频。支持 av 和 bv 号。\n用法 1 {{\u0026lt; bilibili \u0026#34;BV1634y1t7xR\u0026#34; \u0026gt;}} YouTube Hugo 内置的 YouTube 短代码。\n用法 1 {{\u0026lt; youtube ZJthWmvUzzc \u0026gt;}} 腾讯视频 (Tencent Video) 嵌入来自腾讯视频的视频。\n用法 1 {{\u0026lt; tencent \u0026#34;u00306ng962\u0026#34; \u0026gt;}} GitLab Snippet 嵌入来自 GitLab 的代码片段。\n用法 1 {{\u0026lt; gitlab 2349278 \u0026gt;}} 图表 (Diagrams) Stack 出箱即用地支持 Mermaid 图表。\ngraph TD; A--\u003eB; A--\u003eC; B--\u003eD; C--\u003eD;用法 将你的 Mermaid 代码包裹在语言设置为 mermaid 的代码块中。\n```mermaid graph TD; A--\u003eB; A--\u003eC; B--\u003eD; C--\u003eD; ```","date":"2026-01-26T00:00:00Z","permalink":"/p/%E7%9F%AD%E4%BB%A3%E7%A0%81/","title":"短代码"},{"content":"Stack 主题内置了对相册的支持。你只需要简单地将多张图片并排放置，就可以创建一个精美的相册。\n示例相册 它是如何工作的 相册由 Photoswipe 和一个自定义的内部脚本驱动。它会根据图片的宽高比自动计算出最佳布局。\n要创建一个相册，你只需要将多张图片放在同一行（或同一个段落）中。\n语法 1 2 3 ![图片 1](image1.jpg) ![图片 2](image2.jpg) ![图片 3](image3.jpg) ![图片 4](image4.jpg) 注意: 图片之间应该有两个空格，以确保它们在 Markdown 中保持在同一行。\n相册语法启发自 Typlog\n","date":"2026-01-26T00:00:00Z","image":"/p/image-gallery/helena-hertz-wWZzXlDpMog-unsplash.jpg","permalink":"/p/image-gallery/","title":"相册"},{"content":"这篇文章提供了可以在 Hugo 内容文件中使用的基本 Markdown 语法示例，同时也展示了 Hugo 主题中基本 HTML 元素是否应用了 CSS 装饰。\n标题 (Headings) 以下 HTML \u0026lt;h1\u0026gt;—\u0026lt;h6\u0026gt; 元素代表了六个级别的章节标题。\u0026lt;h1\u0026gt; 是最高级别，而 \u0026lt;h6\u0026gt; 是最低级别。\nH3 H4 H5 H6 段落 (Paragraph) Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.\nItatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.\n引用 (Blockquotes) 引用元素代表从另一个来源引用的内容，可以选择带有引用说明（必须在 footer 或 cite 元素内），也可以选择带有行内更改（如注释和缩写）。\n不带出处的引用 Tiam, ad mint andaepu dandae nostion secatur sequo quae. 注意：你可以在引用中使用 Markdown 语法。\n带有出处的引用 不要通过共享内存来通信，而要通过通信来共享内存。\n— Rob Pike1\n带提示的引用 📝 备注 突出显示用户在快速浏览时也应注意的信息。\n💡 提示 可选信息，帮助用户更顺利地完成任务。\n📌 重要 用户成功所必需的关键信息。\n⚠️ 警告 由于潜在风险而需要用户立即关注的关键内容。\n🚨 注意 某个操作可能带来的负面后果。\n📝 自定义标题 如果你想使用自定义标题，可以在方括号后面添加标题文本，如上所示。\n表格 (Tables) 表格虽然不是 Markdown 核心规范的一部分，但 Hugo 出箱即用地支持它们。\n姓名 年龄 Bob 27 Alice 23 表格内的行内 Markdown 斜体 加粗 代码 italics bold code A B C D E F Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies, sapien non euismod aliquam, dui ligula tincidunt odio, at accumsan nulla sapien eget ex. Proin eleifend dictum ipsum, non euismod ipsum pulvinar et. Vivamus sollicitudin, quam in pulvinar aliquam, metus elit pretium purus Proin sit amet velit nec enim imperdiet vehicula. Ut bibendum vestibulum quam, eu egestas turpis gravida nec Sed scelerisque nec turpis vel viverra. Vivamus vitae pretium sapien 代码块 (Code Blocks) 使用反引号的代码块 1 2 3 4 5 6 7 8 9 10 \u0026lt;!doctype html\u0026gt; \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; 使用四个空格缩进的代码块 \u0026lt;!doctype html\u0026gt; \u0026lt;html lang=\u0026quot;en\u0026quot;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026quot;utf-8\u0026quot;\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Diff 代码块 1 2 3 4 5 [dependencies.bevy] git = \u0026#34;https://github.com/bevyengine/bevy\u0026#34; rev = \u0026#34;11f52b8c72fc3a568e8bb4a4cd1f3eb025ac2e13\u0026#34; - features = [\u0026#34;dynamic\u0026#34;] + features = [\u0026#34;jpeg\u0026#34;, \u0026#34;dynamic\u0026#34;] 单行代码块 1 \u0026lt;p\u0026gt;A paragraph\u0026lt;/p\u0026gt; 列表类型 (List Types) 有序列表 第一项 第二项 第三项 无序列表 列表项 另一项 还有一项 嵌套列表 水果 苹果 橘子 香蕉 乳制品 牛奶 奶酪 其他元素 — abbr, sub, sup, kbd, mark GIF 是一种位图图像格式。\nH2O\nXn + Yn = Zn\n按 CTRL + ALT + Delete 结束会话。\n大多数蝾螈是夜行性的，捕食昆虫、蠕虫和其他小型生物。\n以上引用摘自 Rob Pike 在 2015 年 11 月 18 日 Gopherfest 期间的演讲。\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"2026-01-25T00:00:00Z","image":"/p/markdown-%E8%AF%AD%E6%B3%95%E6%8C%87%E5%8D%97/pawel-czerwinski-8uZPynIu-rQ-unsplash.jpg","permalink":"/p/markdown-%E8%AF%AD%E6%B3%95%E6%8C%87%E5%8D%97/","title":"Markdown 语法指南"},{"content":"Stack 主题支持使用 KaTeX 渲染数学公式。\n启用 KaTeX 按页面启用 要在特定文章中启用 KaTeX，请在文章的前置参数（frontmatter）中包含 math: true：\n1 2 3 4 --- title: \u0026#34;我的数学文章\u0026#34; math: true --- 全局启用 要为所有文章启用 KaTeX，请在网站配置（params.yaml 或 params.toml）中将 article.math 设置为 true：\n1 2 article: math: true 示例 行内公式 你可以通过将表达式包裹在单个美元符号 $ 中来包含行内公式。\n例如：$ \\varphi = \\dfrac{1+\\sqrt5}{2}= 1.6180339887… $ 将渲染为 $ \\varphi = \\dfrac{1+\\sqrt5}{2}= 1.6180339887… $\n块级公式 对于较大的方程式，请使用双美元符号 $$ 创建数学块。\n$$ \\varphi = 1+\\frac{1} {1+\\frac{1} {1+\\frac{1} {1+\\cdots} } } $$更复杂的公式 $$ f(a) = \\frac{1}{2\\pi i} \\oint_\\gamma \\frac{f(z)}{z-a} dz $$ 注意： 有关受支持的 TeX 函数的完整列表，请参阅 KaTeX 文档。\n","date":"2026-01-24T00:00:00Z","permalink":"/p/math-typesetting/","title":"数学公式"},{"content":"This theme supports Mermaid diagrams directly in your Markdown content. Mermaid lets you create diagrams and visualizations using text and code.\nAbout Mermaid.js This theme integrates Mermaid.js (v11) to render diagrams from text definitions within Markdown code blocks. Mermaid is a JavaScript-based diagramming and charting tool that uses text-based syntax inspired by Markdown.\nFor complete syntax documentation, see the Mermaid.js documentation.\nGetting Started To create a Mermaid diagram, simply use a fenced code block with mermaid as the language identifier:\n1 2 3 4 5 ```mermaid graph TD A[Start] --\u0026gt; B[Process] B --\u0026gt; C[End] ``` The diagram will be automatically rendered when the page loads.\nFeatures Auto-detection: Mermaid script only loads on pages that contain diagrams Theme Support: Diagrams automatically adapt to light/dark mode HTML Labels: Support for HTML content in labels (like \u0026lt;br/\u0026gt; for line breaks) Configurable: Customize version, security level, and more in your site config Configuration You can configure Mermaid in your site config:\nhugo.yaml:\n1 2 3 4 5 6 7 8 9 params: article: mermaid: version: \u0026#34;11\u0026#34; # Mermaid version from CDN look: classic # classic or handDrawn (sketch style) lightTheme: default # Theme for light mode darkTheme: neutral # Theme for dark mode securityLevel: strict # strict (default), loose, antiscript, sandbox htmlLabels: true # Enable HTML in labels hugo.toml:\n1 2 3 4 5 6 7 [params.article.mermaid] version = \u0026#34;11\u0026#34; # Mermaid version from CDN look = \u0026#34;classic\u0026#34; # classic or handDrawn (sketch style) lightTheme = \u0026#34;default\u0026#34; # Theme for light mode darkTheme = \u0026#34;neutral\u0026#34; # Theme for dark mode securityLevel = \u0026#34;strict\u0026#34; # strict (default), loose, antiscript, sandbox htmlLabels = true # Enable HTML in labels Additional Global Options These optional settings use Mermaid\u0026rsquo;s defaults when not specified:\nhugo.yaml:\n1 2 3 4 5 6 7 8 9 params: article: mermaid: maxTextSize: 50000 # Maximum text size (default: 50000) maxEdges: 500 # Maximum edges allowed (default: 500) fontSize: 16 # Global font size in pixels (default: 16) fontFamily: \u0026#34;arial\u0026#34; # Global font family curve: \u0026#34;basis\u0026#34; # Line curve: basis, cardinal, linear (default: basis) logLevel: 5 # Debug level 0-5, 0=debug, 5=fatal (default: 5) hugo.toml:\n1 2 3 4 5 6 7 [params.article.mermaid] maxTextSize = 50000 # Maximum text size (default: 50000) maxEdges = 500 # Maximum edges allowed (default: 500) fontSize = 16 # Global font size in pixels (default: 16) fontFamily = \u0026#34;arial\u0026#34; # Global font family curve = \u0026#34;basis\u0026#34; # Line curve: basis, cardinal, linear (default: basis) logLevel = 5 # Debug level 0-5, 0=debug, 5=fatal (default: 5) For diagram-specific options (like flowchart.useMaxWidth), use Mermaid\u0026rsquo;s init directive directly in your diagram:\n1 2 3 4 5 ```mermaid %%{init: {\u0026#39;flowchart\u0026#39;: {\u0026#39;useMaxWidth\u0026#39;: false}}}%% flowchart LR A --\u0026gt; B ``` Security Note: The default securityLevel: strict is recommended. Set to loose only if you need HTML labels like \u0026lt;br/\u0026gt; in your diagrams.\nAvailable Themes Theme Description default Standard colorful theme neutral Grayscale, great for printing and dark mode dark Designed for dark backgrounds forest Green color palette base Minimal theme, customizable with themeVariables null Disable theming entirely Custom Theme Variables For full control, use the base theme with custom variables:\nhugo.yaml:\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 params: article: mermaid: lightTheme: base darkTheme: base lightThemeVariables: primaryColor: \u0026#34;#4a90d9\u0026#34; primaryTextColor: \u0026#34;#ffffff\u0026#34; lineColor: \u0026#34;#333333\u0026#34; darkThemeVariables: primaryColor: \u0026#34;#6ab0f3\u0026#34; primaryTextColor: \u0026#34;#ffffff\u0026#34; lineColor: \u0026#34;#cccccc\u0026#34; background: \u0026#34;#1a1a2e\u0026#34; hugo.toml:\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 [params.article.mermaid] lightTheme = \u0026#34;base\u0026#34; darkTheme = \u0026#34;base\u0026#34; [params.article.mermaid.lightThemeVariables] primaryColor = \u0026#34;#4a90d9\u0026#34; primaryTextColor = \u0026#34;#ffffff\u0026#34; lineColor = \u0026#34;#333333\u0026#34; [params.article.mermaid.darkThemeVariables] primaryColor = \u0026#34;#6ab0f3\u0026#34; primaryTextColor = \u0026#34;#ffffff\u0026#34; lineColor = \u0026#34;#cccccc\u0026#34; background = \u0026#34;#1a1a2e\u0026#34; Common variables: primaryColor, secondaryColor, tertiaryColor, primaryTextColor, lineColor, background, fontFamily\nNote: Theme variables only work with the base theme and must use hex color values (e.g., #ff0000).\nDiagram Types Flowchart Flowcharts are the most common diagram type. Use graph or flowchart with direction indicators:\nTD or TB: Top to bottom BT: Bottom to top LR: Left to right RL: Right to left flowchart LR A[Hard edge] --\u003e|Link text| B(Round edge) B --\u003e C{Decision} C --\u003e|One| D[Result one] C --\u003e|Two| E[Result two]Sequence Diagram Perfect for showing interactions between components:\nsequenceDiagram participant Alice participant Bob Alice-\u003e\u003eJohn: Hello John, how are you? loop Healthcheck John-\u003e\u003eJohn: Fight against hypochondria end Note right of John: Rational thoughts prevail! John--\u003e\u003eAlice: Great! John-\u003e\u003eBob: How about you? Bob--\u003e\u003eJohn: Jolly good!Class Diagram Visualize class structures and relationships:\nclassDiagram Animal \u003c|-- Duck Animal \u003c|-- Fish Animal \u003c|-- 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() }State Diagram Model state machines and transitions:\nstateDiagram-v2 [*] --\u003e Still Still --\u003e [*] Still --\u003e Moving Moving --\u003e Still Moving --\u003e Crash Crash --\u003e [*]Entity Relationship Diagram Document database schemas:\nerDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses CUSTOMER { string name string custNumber string sector } ORDER { int orderNumber string deliveryAddress }Gantt Chart Plan and track project schedules:\ngantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2024-01-01, 30d Another task :after a1, 20d section Another Task in Another :2024-01-12, 12d another task :24dPie Chart Display proportional data:\npie showData title Key elements in Product X \"Calcium\" : 42.96 \"Potassium\" : 50.05 \"Magnesium\" : 10.01 \"Iron\" : 5Git Graph Visualize Git branching strategies:\ngitGraph commit commit branch develop checkout develop commit commit checkout main merge develop commit commitMindmap Create hierarchical mindmaps:\nmindmap root((mindmap)) Origins Long history Popularisation British popular psychology author Tony Buzan Research On effectivenessand features On Automatic creation Uses Creative techniques Strategic planning Argument mapping Tools Pen and paper MermaidTimeline Display chronological events:\ntimeline title History of Social Media Platform 2002 : LinkedIn 2004 : Facebook : Google 2005 : YouTube 2006 : TwitterAdvanced Features HTML in Labels To use HTML in labels, you must set securityLevel: loose in your site config:\nhugo.yaml:\n1 2 3 4 5 params: article: mermaid: securityLevel: loose htmlLabels: true hugo.toml:\n1 2 3 [params.article.mermaid] securityLevel = \u0026#34;loose\u0026#34; htmlLabels = true Then you can use HTML tags like \u0026lt;br/\u0026gt; for line breaks:\n1 2 3 4 ```mermaid graph TD A[Line 1\u0026lt;br/\u0026gt;Line 2] --\u0026gt; B[\u0026lt;b\u0026gt;Bold\u0026lt;/b\u0026gt; text] ``` Per-Diagram Theming Override the theme for a specific diagram using Mermaid\u0026rsquo;s frontmatter:\n1 2 3 4 5 ```mermaid %%{init: {\u0026#39;theme\u0026#39;: \u0026#39;forest\u0026#39;}}%% graph TD A[Start] --\u0026gt; B[End] ``` %%{init: {'theme': 'forest'}}%% graph TD A[Christmas] --\u003e|Get money| B(Go shopping) B --\u003e C{Let me think} C --\u003e|One| D[Laptop] C --\u003e|Two| E[iPhone] C --\u003e|Three| F[Car]Inline Styling with style You can style individual nodes directly within your diagram using the style directive:\n1 2 3 4 5 6 7 ```mermaid flowchart LR A[Start] --\u0026gt; B[Process] --\u0026gt; C[End] style A fill:#4ade80,stroke:#166534,color:#000 style B fill:#60a5fa,stroke:#1e40af,color:#000 style C fill:#f87171,stroke:#991b1b,color:#fff ``` Result:\nflowchart LR A[Start] --\u003e B[Process] --\u003e C[End] style A fill:#4ade80,stroke:#166534,color:#000 style B fill:#60a5fa,stroke:#1e40af,color:#000 style C fill:#f87171,stroke:#991b1b,color:#fffStyle properties include:\nfill - Background color stroke - Border color stroke-width - Border thickness color - Text color stroke-dasharray - Dashed border (e.g., 5 5) Styling with CSS Classes You can define reusable styles with classDef and apply them using :::className:\n1 2 3 4 5 6 7 ```mermaid flowchart LR A:::success --\u0026gt; B:::info --\u0026gt; C:::warning classDef success fill:#4ade80,stroke:#166534,color:#000 classDef info fill:#60a5fa,stroke:#1e40af,color:#000 classDef warning fill:#fbbf24,stroke:#92400e,color:#000 ``` Result:\nflowchart LR A:::success --\u003e B:::info --\u003e C:::warning classDef success fill:#4ade80,stroke:#166534,color:#000 classDef info fill:#60a5fa,stroke:#1e40af,color:#000 classDef warning fill:#fbbf24,stroke:#92400e,color:#000Subgraphs Group related nodes together:\nflowchart TB subgraph one a1--\u003ea2 end subgraph two b1--\u003eb2 end subgraph three c1--\u003ec2 end one --\u003e two three --\u003e two two --\u003e c2Theme Switching This theme automatically detects your site\u0026rsquo;s light/dark mode preference and adjusts the Mermaid diagram theme accordingly:\nLight mode: Uses the default Mermaid theme Dark mode: Uses the dark Mermaid theme (configurable) Try toggling the theme switcher to see diagrams update in real-time!\nComplex Example Here\u0026rsquo;s an example with subgraphs, HTML labels, emojis, and custom styling:\nflowchart TD subgraph client[\"👤 Client\"] A[\"User Device192.168.1.10\"] end subgraph cloud[\"☁️ Cloud Gateway\"] B[\"Load Balancer(SSL Termination)\"] end subgraph server[\"🖥️ Application Server\"] C[\"API Gateway10.0.0.1\"] D[\"Auth Service10.0.0.2\"] E[\"Web Server10.0.0.3\"] F[\"Database10.0.0.4\"] end A -- \"HTTPS Request\" --\u003e B B -- \"Forward(internal)\" --\u003e C C -- \"Authenticate\" --\u003e D D -- \"Token\" --\u003e C C -- \"Route\" --\u003e E E --\u003e F style client fill:#1a365d,stroke:#2c5282,color:#fff style cloud fill:#f6ad55,stroke:#dd6b20,color:#000 style server fill:#276749,stroke:#22543d,color:#fff Note: This example requires securityLevel: loose for HTML labels and styling to work.\nKnown Limitations Dark Mode Theming Mermaid.js\u0026rsquo;s built-in themes have some limitations:\ndark theme (default): Best text contrast, but some diagram backgrounds may appear brownish (e.g., Gantt charts) neutral theme: Better background colors, but some text (labels, legends) may have reduced contrast For full control, use the base theme with custom variables:\nhugo.yaml:\n1 2 3 4 5 6 7 8 9 params: article: mermaid: darkTheme: base darkThemeVariables: primaryColor: \u0026#34;#1f2937\u0026#34; primaryTextColor: \u0026#34;#ffffff\u0026#34; lineColor: \u0026#34;#9ca3af\u0026#34; textColor: \u0026#34;#e5e7eb\u0026#34; hugo.toml:\n1 2 3 4 5 6 7 8 [params.article.mermaid] darkTheme = \u0026#34;base\u0026#34; [params.article.mermaid.darkThemeVariables] primaryColor = \u0026#34;#1f2937\u0026#34; primaryTextColor = \u0026#34;#ffffff\u0026#34; lineColor = \u0026#34;#9ca3af\u0026#34; textColor = \u0026#34;#e5e7eb\u0026#34; We plan to improve dark mode theming in future updates as Mermaid.js evolves.\nTroubleshooting Diagram not rendering? Make sure you\u0026rsquo;re using a fenced code block with mermaid as the language Check your browser\u0026rsquo;s console for syntax errors Verify your Mermaid syntax at Mermaid Live Editor HTML not working in labels? HTML in labels requires securityLevel: loose. Update your configuration:\nhugo.yaml:\n1 2 3 4 5 params: article: mermaid: securityLevel: loose htmlLabels: true hugo.toml:\n1 2 3 [params.article.mermaid] securityLevel = \u0026#34;loose\u0026#34; htmlLabels = true Warning: Using loose security level allows HTML in diagrams. Only use this if you trust your diagram content.\nSyntax errors? Mermaid is strict about syntax. Common issues:\nMissing spaces around arrows Unclosed brackets or quotes Invalid node IDs (avoid special characters) Resources Mermaid Documentation Mermaid Live Editor - Test diagrams interactively Mermaid Syntax Reference ","date":"2025-12-23T00:00:00Z","permalink":"/p/mermaid-diagrams/","title":"Mermaid Diagrams"}]