公司服务器部署的系统比较多，端口也多，IP记不住，端口号也记不住；之前做了个导航页面，但是还是想着如果能用域名管理就好了，又做了个DNS代理，在服务器上，但是要使用的话还要配置客户端DNS指向，后来发现原来防火墙上就有这个服务，现在记录下；



![jiagou-copy.drawio.png](/static/img/bcdba603a85bfca5320a2bd086e80583.jiagou-copy.drawio.webp)


# 1. DNS代理

公司的网络首先要经过防火墙，防火墙上有DNS代理服务，就不用单独配置代理了，

![图片.png](/static/img/96f4e78d9504879c36dc9e0ed5d12e6f.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

这里的本地域名应使用没有注册过的域名，如果已经存在的，可能不会代理到，我没细测；

代理策略指向一个服务器 比如 192.168.2.23


![图片.png](/static/img/fd84d4af874c235971b70ad8edacbc04.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

虽然指向了服务器，下一步呢，比如我访问二级域名 `nginx.hd.top` 怎么指向 实际的服务  `192.168.123.43:8081` 呢，很简单 使用 `Nginx` 就可以了，所以要在 `192.168.2.23` 部署`Nginx`，`Nginx`代理到实际的应用；

# 2. nginx-proxy-manager

直接使用 `Dockge` 部署 `nginx-proxy-manager` 中文版...

``` compose.yaml
version: "3.8"
services:
  nginx-proxy-manager:
    restart: unless-stopped
    image: chishin/nginx-proxy-manager-zh:latest
    ports:
      - 80:80
      - 81:81
      - 443:443
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt
networks: {}

```


![图片.png](/static/img/fac4a837d9b005138d86750a5aa9c927.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

直接指向实际的IP和端口就行了

![图片.png](/static/img/ef106368408cf631e403f036292caaae.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

---
这样， `二级域名`会通过`DNS`解析到 `2.23` 然后 通过 `2.23` 的`Nginx`转到实际的服务

公司局域网本地域名

![Uptime Kuma.png](/static/img/d55aef3f3cf53472f2e6796d42725401.Uptime%20Kuma.webp)

大家都知道我本来就是大聪明🤓，小机灵鬼😳，然后偶尔~嘿，我就要去 [chatanywhere](https://api.chatanywhere.tech/#/) 看看API余额还有多少，这也没有个接口时不时的就要查一下，如果能提醒就好了，我就想：我怎么这么帅呢😎

![图片.png](/static/img/0fbc4c52ad7dd71ee873ae594331668b.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)



# 1. 截取提交

首先使用火狐浏览器的开发者工具把提交数据复制下来


![图片.png](/static/img/06e8b4870de4febb5d24949221bf3cc5.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

得到如下字符串

```
curl "https://api.chatanywhere.tech/v1/query/balance" --compressed -X POST -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:127.0) Gecko/20100101 Firefox/127.0" -H "Accept: application/json, text/plain, */*" -H "Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2" -H "Accept-Encoding: gzip, deflate, br, zstd" -H "Access-Control-Allow-Headers: Authorization,Origin, X-Requested-With, Content-Type, Accept" -H "Access-Control-Allow-Methods: GET,POST" -H "Access-Control-Allow-Origin: *" -H "Authorization: 不告诉你" -H "Origin: https://api.chatanywhere.tech" -H "Connection: keep-alive" -H "Referer: https://api.chatanywhere.tech/" -H "Sec-Fetch-Dest: empty" -H "Sec-Fetch-Mode: cors" -H "Sec-Fetch-Site: same-origin" -H "Priority: u=1" -H "Pragma: no-cache" -H "Cache-Control: no-cache" -H "Content-Length: 0"
```


# 2. 测试

然后使用 APIFOX 测试一下

![图片.png](/static/img/d4e45b575dab848dd47c36817c944c2d.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

就得到结果了

![图片.png](/static/img/92eba650892480c6418ba1dd52320ba0.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

# 3. 监听

服务器的 `Uptime Kuma` 也是我安装的，可以监听服务，也可以监听json，非常方便，把参数填进去


![QNVE0NFQ$M0KMMVX97JI1$6.jpg](/static/img/fcddc388618694b74889fab490782de6.QNVE0NFQ$M0KMMVX97JI1$6.webp)

![](https://blog.shizhuoran.top/static/img/9d8b07af28e452e8118bf506c5404c2d.20240618101852.webp)

这里使用了 [JSONata](https://jsonata.org/)，挺有意思，这样`Uptime Kuma` 就可以监听并通知到钉钉了，裆余额小于10时通知我的丁丁👏

---

所有这里只要有`API`接口返回个`json` ，就可以使用  `Uptime Kuma` 监听通知并通知，是一个新的运维思路

使用Uptime Kuma监听接口

![LibGit2Sharp.png](/static/img/9581db7a896d63fd70fef2a7b5caaedd.LibGit2Sharp.webp)

这不是要写年中报告📊么，昨天晚上哄小孩睡觉😴想到可以分析下项目在Git上的提交文件次数📁，分下前台和后天的修改，为系统的升级和后续设计提供数据支撑📈；看似无聊其实没什么用；




`代码肯定不会自己写的`

:::note{title="gtp-4o"}
## 我:
我的.net项目是 git 管理的，我现在想分析下建项以来所有的改动，哪些是前端修改，哪些是后端修改，我应该怎么做

## ChatGPT:
要分析你的 .NET 项目自创建以来的所有改动，并区分哪些是前端修改，哪些是后端修改，你可以遵循以下步骤：

1. 获取所有的提交记录：

你可以使用 Git 命令来获取所有的提交记录。以下是一个基本命令来获取所有提交的列表：
```
git log --pretty=format:"%H"
```

这个命令会输出所有提交的哈希值。

2. 分析每个提交的改动：

对于每个提交，你需要分析修改了哪些文件。你可以使用以下命令来获取某个提交的文件改动列表：
```
git diff-tree --no-commit-id --name-only -r <commit-hash>
```
这个命令会列出指定提交中所有被修改的文件。

3. 区分前端和后端文件：

根据文件路径和文件类型，你可以区分哪些文件是前端文件，哪些是后端文件。通常，前端文件包括 HTML、CSS、JavaScript、TypeScript 文件等，而后端文件包括 C# 文件（.cs）、配置文件等。

例如，假设你的项目结构如下：
```
/frontend
    /src
        /components
            App.js
            ...
/backend
    /Controllers
        HomeController.cs
        ...
```
你可以根据文件路径来判断。
编写脚本自动化分析：
你可以编写一个脚本来自动化上述步骤。

5. 进一步分析：

你可以根据需要进一步分析每个提交的具体改动内容，或者生成更详细的报告。

希望这些步骤能够帮助你分析项目中的改动情况。如果你有任何其他问题，欢迎随时提问！

## 我:
写个.net控制台程序吧

## ChatGPT:
好的，我们可以使用 .NET 来编写一个控制台程序，来分析 Git 提交记录并区分前端和后端的修改。你可以使用 LibGit2Sharp 这个库来操作 Git 仓库。

首先，你需要在你的项目中安装 LibGit2Sharp 包。你可以使用 NuGet 包管理器来安装它：
```
dotnet add package LibGit2Sharp
```

然后，你可以编写以下 C# 控制台程序：
```
using System;
using System.Collections.Generic;
using System.Linq;
using LibGit2Sharp;

namespace GitChangeAnalyzer
{
    class Program
    {
        static void Main(string[] args)
        {
            // 仓库路径
            string repoPath = @"path\to\your\repository";

            using (var repo = new Repository(repoPath))
            {
                // 获取所有提交
                var commits = repo.Commits;

                int frontendChanges = 0;
                int backendChanges = 0;

                foreach (var commit in commits)
                {
                    var changes = repo.Diff.Compare<TreeChanges>(commit.Parents.First().Tree, commit.Tree);

                    bool hasFrontendChange = false;
                    bool hasBackendChange = false;

                    foreach (var change in changes)
                    {
                        if (IsFrontendFile(change.Path))
                        {
                            hasFrontendChange = true;
                        }
                        else if (IsBackendFile(change.Path))
                        {
                            hasBackendChange = true;
                        }
                    }

                    if (hasFrontendChange)
                    {
                        frontendChanges++;
                    }

                    if (hasBackendChange)
                    {
                        backendChanges++;
                    }
                }

                Console.WriteLine($"Total frontend changes: {frontendChanges}");
                Console.WriteLine($"Total backend changes: {backendChanges}");
            }
        }

        static bool IsFrontendFile(string filePath)
        {
            // 根据文件路径和扩展名判断是否是前端文件
            return filePath.StartsWith("frontend/") ||
                   filePath.EndsWith(".html") ||
                   filePath.EndsWith(".css") ||
                   filePath.EndsWith(".js") ||
                   filePath.EndsWith(".ts");
        }

        static bool IsBackendFile(string filePath)
        {
            // 根据文件路径和扩展名判断是否是后端文件
            return filePath.StartsWith("backend/") ||
                   filePath.EndsWith(".cs") ||
                   filePath.EndsWith(".config") ||
                   filePath.EndsWith(".xml");
        }
    }
}
```
请注意以下几点：
1. 设置仓库路径：你需要将 repoPath 设置为你的 Git 仓库的路径。
2. 判断文件类型：IsFrontendFile 和 IsBackendFile 方法用于判断文件是前端文件还是后端文件。你可以根据你的项目结构和文件类型进行调整。

这个程序会遍历所有的提交，分析每个提交中的文件改动，并统计前端和后端的改动次数。运行程序后，你会在控制台中看到前端和后端的改动次数。

如果你有任何问题或需要进一步的帮助，请告诉我！
:::

这里唯一的坑是提示 `LibGit2Sharp.LibGit2SharpException:“repository path 'E:/华电众信/HD_MES/' is not owned by current user”`

在[这里](https://blog.csdn.net/witton/article/details/129734545?spm=1001.2101.3001.6650.12&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-12-129734545-blog-94206450.235%5Ev43%5Epc_blog_bottom_relevance_base4&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-12-129734545-blog-94206450.235%5Ev43%5Epc_blog_bottom_relevance_base4&utm_relevant_index=21)解决



:::note{title="gpt-4o"}
## 我:
我已经得到结果 
前端文件修改总数: 9848
后端文件修改总数: 12609
其他文件修改总数: 47917
总提交数: 1235
总修改数: 145399


## ChatGPT:
好的，我们可以根据你提供的最新数据进行分析：

- 前端文件修改总数: 9848
- 后端文件修改总数: 12609
- 其他文件修改总数: 47917
- 总提交数: 1235
- 总修改数: 145399

我们可以从这些数据中得出以下信息和结论：

### 1. 修改类型分布
- 前端文件修改占总修改数的比例：
  \[
  \frac{9848}{145399} \approx 6.77\%
  \]
- 后端文件修改占总修改数的比例：
  \[
  \frac{12609}{145399} \approx 8.67\%
  \]
- 其他文件修改占总修改数的比例：
  \[
  \frac{47917}{145399} \approx 32.95\%
  \]

### 2. 每次提交的平均修改数
- 平均每次提交的修改数：
  \[
  \frac{145399}{1235} \approx 117.72
  \]

### 3. 前端和后端修改的相对比例
- 前端文件修改与后端文件修改的比例：
  \[
  \frac{9848}{12609} \approx 0.78
  \]

### 4. 前端和后端修改的绝对数量
- 前端文件修改总数：9848
- 后端文件修改总数：12609

### 5. 其他文件的修改情况
- 其他文件的修改总数：47917

### 结论
1. **修改类型分布**：
   - 前端文件修改占总修改数的6.77%，后端文件修改占总修改数的8.67%，其他文件修改占总修改数的32.95%。
   - 其他文件的修改次数虽然仍然占据较大比例，但相比之前的数据，比例有所下降。

2. **每次提交的平均修改数**：
   - 每次提交平均有约118个文件被修改，这与之前的数据一致。

3. **前端和后端修改的相对比例**：
   - 前端文件修改与后端文件修改的比例为0.78，这表明后端文件的修改次数仍然多于前端文件，但比例略低于之前的数据。

4. **前端和后端修改的绝对数量**：
   - 后端文件的修改总数比前端文件多2761次。

5. **其他文件的修改情况**：
   - 其他文件的修改次数显著减少，这可能表明项目中配置文件、文档或其他非代码文件的变更次数减少。

### 总结
1. **修改类型的分布有所变化**，前端和后端文件的修改比例相对增加，其他文件的修改比例减少。
2. **每次提交的平均修改数保持不变**，每次提交平均修改118个文件。
3. **后端文件的修改次数仍然多于前端文件**，但比例有所下降，表明前后端开发的工作量仍然比较均衡。
4. **其他文件的修改次数显著减少**，可能意味着项目的配置、文档或其他非代码文件的变更减少。

如果你有任何特定的方面需要进一步分析或有更多数据提供，我可以帮助你进行更详细的分析。
:::

使用LibGit2Sharp分析项目提交

![MermaidHelp2.png](/static/img/c747025b20c3baaf42871cc9e04ce125.MermaidHelp2.webp)

没想到还能出第二期，这几天增加了功能，还是有坑，这里说下

# 1. FineUI11

既然是FineUI11用例项目，`FineUI11`的改造是永久话题，

## 1.1 `f:Tool`图标在右边
对于`f:ContentPanel`我使用了`<Tools>`放按钮，因为`f:Toolbar`会错位，`Tools`里的控件`f:Tool`是图标和文字，但是这个没有图片再右边的属性`IconAlign` ，`f:Button`是有的；我想要这样的

![图片.png](/static/img/862a35c67352e0eb888171ed0fe278c2.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)



好吧，只能改，首先新建 `ToolEx`
``` c#
 [HtmlTargetElement("f:Tool")]
 [RestrictChildren("Menu", new string[] { "Listeners", "Attributes" })]
 public class ToolEx : ToolTagHelperEx
 {
 }
```

然后告诉前台 Tool 被接管了 
```  _ViewImports.cshtml
@removeTagHelper FineUICoreEx.ToolTagHelperEx, FineUICoreEx
```

最后增加属性，核心就是`i`和`span`换个位置；

```
[HtmlTargetElement("f:Tool")]
[RestrictChildren("Menu", new string[] { "Listeners", "Attributes" })]
public class ToolEx : ToolTagHelperEx
{
    /// <summary>
    /// 图标位置， 只支持右侧 或 左侧
    /// </summary>
    [HtmlAttributeName("IconAlign")]
    public IconAlign IconAlign { get; set; }

    protected override void PreProcess(TagHelperContext context, TagHelperOutput output)
    {
        StringBuilder sb = new();
        if (IconAlign == IconAlign.Right)
        {
            sb.Append($"$('#{this.Source.ID} i').before($('#{this.Source.ID} span'));");
        }
        PageContext.RegisterStartupScript(sb.ToString());
        base.PreProcess(context, output);
    }
}
```

## 1.2 分割线
`Tools`里 `f:ToolbarSeparator` 也没有，干脆造一个，这里的思路是先 `new Tool()`，然后直接绘制一个`ToolbarSeparator` 替换；

首先要告诉 `Tools` 可以有 `f:ToolbarSeparator`，和上面的思路一样 

``` c#
[HtmlTargetElement("Tools")]
[RestrictChildren("f:Tool", new string[] { "f:ToolbarSeparator" })]
public class ToolsEx : ToolsTagHelperEx
{
}
```

然后修改 `ToolbarSeparatorTagHelperEx` 的默认绘制，如果是包在 `<Tools>` 里的，就改变行为
``` c#
public class ToolbarSeparatorEx : ITagHelperEx<ToolbarSeparatorTagHelperEx>
{
    public void BeforProcess(ToolbarSeparatorTagHelperEx tagHelper, TagHelperContext context, TagHelperOutput output, TagHelperExFun method)
    {
        var currentPath = method.GetCurrentPath();
        var reverse = currentPath.AsEnumerable().Reverse();
        //判断是不是在 ToolsEx 里
        if (currentPath.Any(m => m.GetType() == typeof(ToolsEx)))
        {
            var nextItem = reverse.SkipWhile(m => m.GetType() == typeof(ToolsEx)).First();
            var item = nextItem as PanelBaseTagHelper;
            var newtool = new Tool();
            item.Source.Tools.Add(newtool);
            StringBuilder sb = new();
            sb.Append($"$('#{newtool.ID}').replaceWith('<div class=\"f-toolbar-separator f-toolbar-item f-cmp f-widget\" style=\"display: initial;\"></div>');F.ui.{tagHelper.ID}.remove();$('#{tagHelper.Source.WrapperID}').remove();");
            PageContext.RegisterStartupScript(sb.ToString());
        }
    }
}
```

然后就可以了
 
![图片.png](/static/img/647b7f4a95ab63682d47598cc982ea68.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

# 2. mermaid 
## 2.1 拦截语法错误

`mermaid.js` 提供了语法验证和错误的事件

``` js
//验证 注意是异步方法
F.ui.rightPanel.parse = await mermaid.parse(code);
```

``` js
//注册语法错误
mermaid.setParseErrorHandler((e) => {
    //错误信息
    console.log('e>', e);
})
```

## 2.2 导出放大
`mermaid.ink` 的放大只有 1-3倍，可以通过调节`width`来直接放大，因为有的图像确实很模糊

``` js
let width = $('#mermaidSvg').width();
let scale = F.ui.btnscale.scale || 2;
width = width * scale;
const dataURL = `https://mermaid.ink/img/pako:${F.ui.codePanel.mermaidPako}?type=${type}&width=${width}`;
```

---
至此 该项目告一段落


![](/static/img/508af01e03614acbe3667ba38cdd4698.gongneng2.gif)

:::info{title="相关连接"}
[MermaidHelp开发日志（一）](https://blog.shizhuoran.top/post/50)

[MermaidHelp开发日志（二）](https://blog.shizhuoran.top/post/51)

:::

MermaidHelp开发日志（二）

![MermaidHelp1.png](/static/img/927d29ed10b20c0f1994ade54049129a.MermaidHelp1.webp)

FineUI11出来，想上手开发试一试，正好手头有个需求，就做了个工具；

公司运维的项目越来越多，环境端口啥的容易忘，所以要记录下，上个K8S吧又太大了，所以只能自己记录，画图吧，我就让AI给我输出 `mermaid` ,然后去编辑，导出流程图，这是个完整的工作流，我用FineUI和GPT接口组合到一个页面了；

项目已经开源了 https://gitee.com/shixixiyue/mermaid-help  这里主要说开发过程遇见的坑；




# 1. FineUI控件

## 1.1 HtmlTarget
`HtmlTarget` 还是用着别扭，想写个自定义属性怪难受，这里使用了新的写法，

在 `_ViewImports.cshtml` 可以屏蔽标签

```
@removeTagHelper FineUICore.PanelTagHelper, FineUICore
@removeTagHelper FineUICore.TextAreaTagHelper, FineUICore
```

这样这两个标签就不生效了，`FineUICoreEx.PanelEx` 就生效了，默认 `<f:Panel>` 会指向新的，就可以配置新的属性了也会自动提示

## 1.2 层级

还有个问题就是层级，这个层级有点多，基本外边都是架子，功能的按钮再最里面，藏起来很难找到，看着别扭，函数式 可以把外层直接封装为方法调用和主要功能分离开，标签的写法只能一层一层套，除非用`分部视图`，这样直接就多出页面，这个还没有找到好的办法解决


![图片.png](/static/img/f0b6aeea4d455f623340a81de1f010dd.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

## 1.3 割裂

有的需求只能用js写，这样就割裂了，前后台混着，前台处理一点，后台处理一点，但是后台看着好看，直接写属性多好看`txtInput.Text = inpput;`，但是有些属性不是`Ajax响应` 没办法还得写 `RegisterStartupScript` 加一大串字符串，不然就加扩展方法 `txtInput.SetInput();` 这么写和属性长的也不一样，还是别扭。

.net9好像可以直接给类扩展属性了，期待啊，早点出，能解决不少问题；

## 1.4 Session丢了

可能是配置不对，和FineUI没关系，总之 `FineUICore.PageContext.Current.Session` 一直是`null`，需要这样写

```
services.AddSession(options =>
{
    // Optionally configure session options here
    options.IdleTimeout = TimeSpan.FromMinutes(30);
    options.Cookie.HttpOnly = true;
    options.Cookie.IsEssential = true; // Required for GDPR compliance
});
```
```
app.UseSession();
```
```

        /// <summary>
        /// 得到Session
        /// </summary>
        /// <param name="key">键</param>
        public T GetSession<T>(string key)
        {
            var value = FineUICore.PageContext.Current.Session.GetString(key);
            if (string.IsNullOrEmpty(value))
            {
                value = string.Empty;
                return default(T);
            }
            JObject _value = JObject.Parse(value);
            T ms = (T)_value.ToObject(typeof(T));
            return ms;
        }

        /// <summary>
        /// 设置Session
        /// </summary>
        /// <param name="key">键</param>
        /// <param name="value">值</param>
        protected void SetSession(string key, string value)
        {
            if (string.IsNullOrEmpty(value))
            {
                value = "";
            }
            //IHttpContextAccessor PageContext = PageContext.
            var httpContextAccessor = FineUICore.PageContext.GetService<IHttpContextAccessor>();
            FineUICore.PageContext.Current.Session.SetString(key, value);
            //HttpContext.Session.SetString(key, value);
        }

        /// <summary>
        /// 设置Session
        /// </summary>
        /// <param name="key">键</param>
        /// <param name="value">值</param>
        protected void SetSession(string key, object value)
        {
            string _value = JObject.FromObject(value).ToString(Newtonsoft.Json.Formatting.None);
            SetSession(key, _value);
        }

```
# 2. Marked显示Markdown

基本网上能看见的`Marked.js`例子都是老的版本，我重新阅读了`Marked`开发文档，如果结合 `highlight` 并且显示行号，需要这么写，


:::info{title="原创首发，全网唯一"}


```
<script src="~/js/marked.min.js"></script>
<script src="~/js/highlight.min.js"></script>
<script src="~/js/highlightjs-line-numbers.min.js"></script>
```

```
const htmlContent = markedAPI('`markdown格式`', mermaidAPI);
document.getElementById('codePanel_Content').innerHTML = htmlContent;
hljs.initLineNumbersOnLoad({ singleLine: true });

/**(markdown格式,代码部分的回调)*/
const markedAPI = (msg, mermaidfun) => {
    return marked.use({
        renderer: {
            code(code, type) {
                if (type === "mermaid") mermaidfun(code);
                return `<pre><code class="hljs language-${type}">${code}</code></pre>`;
            }
        }
    })(msg);
};
```

:::
这里主要是回调`mermaidfun`，如果不加回调，直接使用`marked-highlight.js`插件即可

# 3. mermaid导出图片

`mermaid`生成的svg，要导出图片，这个功能也是做了一天，网上拷贝的例子没一个成功的，AI提供的方法，全部试了一遍，都不能用；
`html2canvas.min.js` `svg2png.js` 都试过了也不行 报错 ；C# `SkiaSharp` `Magick.NET-Q8-AnyCPU` 也不行，黑，字体丢失； 最后看`mermaid`怎么导出的，把`mermaid.live`下载下来看源码，一点点跟踪终于成功了，有个服务 `mermaid.ink`，这个好像也是开源的


![图片.png](/static/img/ed83931cf1049c4f19776aec111db76e.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

:::info{title="原创首发，全网唯一"}

```
<script src="~/js/mermaid.min.js"></script>
<script src="~/js/pako.min.js"></script>
<script src="~/js/base64.min.js"></script>
```
```
// 导出图片
function btnSaveToImg_Click() {
    const mermaidPako = GetPako(`这里是mermaid语法的代码`);
    const dataURL = `https://mermaid.ink/img/pako:${mermaidPako}?type=png`;

    fetch(dataURL)
        .then(response => response.blob())
        .then(blob => {
            const link = document.createElement('a');
            link.download = '导出图片.png';
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(link.href);
        })
        .catch(error => console.error('下载图片时出错:', error));
}
//压缩
function GetPako(code) {
    return serialize(JSON.stringify({
        code,
        mermaid: { theme: "default" },
        autoSync: true,
        updateDiagram: true,
        editorMode: "code"
    }));
}
// 序列化和反序列化函数
function serialize(state) {
    const data = new TextEncoder().encode(state);
    const compressed = pako.deflate(data, { level: 9 });
    return Base64.fromUint8Array(compressed, true);
}

function deserialize(state) {
    const data = Base64.toUint8Array(state);
    return pako.inflate(data, { to: 'string' });
}
```


:::

---

:::info{title="相关连接"}
[MermaidHelp开发日志（一）](https://blog.shizhuoran.top/post/50)

[MermaidHelp开发日志（二）](https://blog.shizhuoran.top/post/51)

:::

1. FineUI11

1.1 f:Tool图标在右边

1.1 `f:Tool`图标在右边