简介： ※CSDN 显示 Mermaid 流程图变化成曲线连接，提高了图形显示的美观度，使得Mermaid 目录的外观更加吸引人。但为什么新的版本中的Mermaid流程图不是居中显示，而是居左显示？这一点是否可以改进？

本文也反馈给了CSDN工作人员。他们对此非常重视，迅速改进了CSDN网页显示Mermaid的特性，使其不仅恢复到居中显示，而且在手机端显示也得到提高。在此为 CSDN 技术人员的快速更新迭代的能力点赞。

关键词： Mermaid，CSDN，居中显示

#mermaid-svg-rsRDMX4ffDizi9xC {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-rsRDMX4ffDizi9xC .error-icon{fill:#552222;}#mermaid-svg-rsRDMX4ffDizi9xC .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-rsRDMX4ffDizi9xC .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-rsRDMX4ffDizi9xC .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-rsRDMX4ffDizi9xC .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-rsRDMX4ffDizi9xC .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-rsRDMX4ffDizi9xC .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-rsRDMX4ffDizi9xC .marker{fill:#333333;stroke:#333333;}#mermaid-svg-rsRDMX4ffDizi9xC .marker.cross{stroke:#333333;}#mermaid-svg-rsRDMX4ffDizi9xC svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-rsRDMX4ffDizi9xC .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-rsRDMX4ffDizi9xC .cluster-label text{fill:#333;}#mermaid-svg-rsRDMX4ffDizi9xC .cluster-label span{color:#333;}#mermaid-svg-rsRDMX4ffDizi9xC .label text,#mermaid-svg-rsRDMX4ffDizi9xC span{fill:#333;color:#333;}#mermaid-svg-rsRDMX4ffDizi9xC .node rect,#mermaid-svg-rsRDMX4ffDizi9xC .node circle,#mermaid-svg-rsRDMX4ffDizi9xC .node ellipse,#mermaid-svg-rsRDMX4ffDizi9xC .node polygon,#mermaid-svg-rsRDMX4ffDizi9xC .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-rsRDMX4ffDizi9xC .node .label{text-align:center;}#mermaid-svg-rsRDMX4ffDizi9xC .node.clickable{cursor:pointer;}#mermaid-svg-rsRDMX4ffDizi9xC .arrowheadPath{fill:#333333;}#mermaid-svg-rsRDMX4ffDizi9xC .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-rsRDMX4ffDizi9xC .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-rsRDMX4ffDizi9xC .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-rsRDMX4ffDizi9xC .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-rsRDMX4ffDizi9xC .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-rsRDMX4ffDizi9xC .cluster text{fill:#333;}#mermaid-svg-rsRDMX4ffDizi9xC .cluster span{color:#333;}#mermaid-svg-rsRDMX4ffDizi9xC div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-rsRDMX4ffDizi9xC :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

惊人变化

目录
Contents

效果对比

对比示例1

对比示例2

存在问题

变化总结

§01 惊人变化

今天查看 CSDN 博客笔记的时候，发现文章中的 Mermaid 目录形成了优雅的曲线显示形式。CSDN的这一点变化令人赞羡不已。

▲ 图1 Mermaid流程图显示目录

这个变化的确比起之前的形式让人感到舒服多了。

§02 效果对比

如果直接点开原来的文章，其中的 Mermaid 目录显示还是折线。但点开编辑之后，则立即变成了曲线。存储后，网页中的内容则显示成曲线的形式。

2.1 对比示例1

下面是之前的Mermaid 图形显示：

▲ 图2 Mermaid流程图显示目录

下面是今天的Mermaid流程图显示。

▲ 图3 Mermaid流程图显示目录

2.2 对比示例2

▲ 图4 之前的Mermaid目录图

▲ 图5 今天的Mermaid目录图

§03 存在问题

经过观察之后，看到先的版本显示的Mermaid 目录都是居左对齐，而不是居中。为啥呀？ 为什么CSDN显示Mermaid 流程图不居中了呢？

▲ 图6 Mermaid流程图显示目录

▲ 图3.2 Mermaid 目录

▲ 图3.3 Mermaid 目录

▲ 图3.4 Mermaid 目录

※ 变化总结 ※

CSDN 显示 Mermaid 流程图变化成曲线连接，提高了图形显示的美观度，使得Mermaid 目录的外观更加吸引人。但为什么新的版本中的Mermaid流程图不是居中显示，而是居左显示？这一点是否可以改进？

后续

本文也反馈给了CSDN工作人员。他们对此非常重视，迅速改进了CSDN网页显示Mermaid的特性，使其不仅恢复到居中显示，而且在手机端显示也得到提高。

在此为 CSDN 技术人员的快速更新迭代点赞。

● 相关图表链接:

今天 CSDN 编辑器的一个惊人的变化相关推荐

使用 Visual Studio Code 和 Pandoc 构建一个惊人的 Markdown 编辑器
使用 Visual Studio Code 和 Pandoc 构建一个惊人的 Markdown 编辑器 1. 安装 Visual Studio Code 2. 熟悉 VS Code 开箱即用的 Mar ...
Go语言环境安装，验证go语言环境、使用文本编辑器编写一个go hello world,Go lang IDE安装，在golang中新建一个go程序
1 Golang语言环境安装包下载 https://www.golangtc.com/ 下载: go1.9.2.windows-amd64.msi 和 go1.9.2.windows-amd64.zi ...
Markdown 编辑器才是yyds｜CSDN编辑器测评
前言今天小编为大家介绍一款编辑器,也正是小编书写这篇文章所使用的Markdown编辑器,正是广大博友想要发布文章的工具.那么你知道他的都有哪些方便之处么下面小编带你了解一下 Markdown是什 ...
吐槽下CSDN编辑器
Perface 近期喜欢上了markdown,我认为它就是一些HTML标签的快捷键,用一些符号来取代标签,易学易读易用,何乐而不为呢?近期也喜欢用印象笔记来让我的记忆永存,确实它强大的收集能力让我迷上 ...
《博客创作帮助 - CSDN编辑器测评》
目录一.Markdown介绍二.市面主流的Markdown 1.Typora 2.VSCode 3.Atom 三.CSDN编辑器使用教程四.快捷功能键五.对于编辑器的建议 1.背景 2.提供的 ...
《不会吧？不会吧？不会还有人不知道 Markdown 吧？｜CSDN编辑器测评》
文章目录 1. CSDN 的 Markdown 是最好的么? 1.1 CSDN Markdown 编辑器的优点 1.2 CSDN Markdown 编辑器的缺点 2. 使用 Markdown 的小技巧 ...
《真香编辑器—CSDN编辑器｜CSDN编辑器测评》
<真香编辑器-CSDN编辑器|CSDN编辑器测评> 文章目录 <真香编辑器-CSDN编辑器|CSDN编辑器测评> *前言一.页面介绍二.功能介绍 Markdown语法介绍 ...
CSDN编辑器排版技巧/教程
这是一个CSDN编辑器排版技巧的教程目录样式如下: 目录欢迎使用Markdown编辑器如何做一个目录新的改变功能快捷键合理的创建标题,有助于目录的生成首行缩进字符颜色如何改变文本的样 ...
CSDN 给你一个薅羊毛的机会！你真的不要吗？
抢红包.集福卡.转锦鲤等等,每年过年过节,各种价值几十亿的瓜分活动,对于网络冲浪选手来说,眼花缭乱但也乐趣满满. 可现实是:你抢了5毛8,人家抢了好几万! 甚至前段时间,字节跳动安全中心发布春节风控报 ...

今天 CSDN 编辑器的一个惊人的变化