diff --git a/README.zh-CN.md b/README.zh-CN.md index b1f44fcf5d..f51d942487 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -15,13 +15,13 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。 -> Mermaid 致力于解决 Doc-Rot 这个令人头疼的问题。 +> Doc-Rot 是 Mermaid 致力于解决的一个难题。 绘图和编写文档花费了开发者宝贵的开发时间，而且随着业务的变更，它很快就会过期。 但是如果缺少了图表或文档，对于生产力和团队新人的业务学习都会产生巨大的阻碍。
-Mermaid 通过减少创建可修改的图表所需要的时间、精力和工具来解决这一难题，从而提高了内容的智能化和可重用性。 作为一个基于文本的绘图工具， Mermaid 天生就易于维护和更新，它也可以作为生产脚本（或其他代码）的一部分，使得文档编写变得更加简单。 有了它之后，开发者可以从维护文档这个与开发割离且麻烦的任务中解放出来。
-即使是从未接触过编程的非专业人员也可以通过 [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/)来创建图表。
-你可以访问 [教程](./docs/Tutorials.md) 来查看 Live Editor 的视频教程。 -U也可以查看 [Mermaid 的集成和使用](./docs/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。 +Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。
+
+Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/) 轻松创建详细的图表。
+你可以访问 [教程](./docs/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。 如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/n00b-overview.md) and [用法](./docs/usage.md). @@ -31,33 +31,41 @@ U也可以查看 [Mermaid 的集成和使用](./docs/integrations.md) 这个清 ## 示例 -__下面是一些使用 Mermaid 和类 Markdown 语法创建的图表示例。点击 [语法](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) 查看详情__ +__下面是一些可以使用 Mermaid 创建的图表示例。点击 [语法](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) 查看详情。__ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +``` +```mermaid + journey + title My working day + section Go to work + Make tea: 5: Me + Go upstairs: 3: Me + Do work: 1: Me, Cat + section Go home + Go downstairs: 5: Me + Sit down: 3: Me +``` -
- 流程图
- [文档 - live editor] -
-flowchart TD
+
+## 流程图 [文档 - live editor]
+
+```
+flowchart LR
 A[Hard] -->|Text| B(Round)
 B --> C{Decision}
 C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
-
- -
- 时序图
- [文档 - live editor] -
+```
+```mermaid
+flowchart LR
+A[Hard] -->|Text| B(Round)
+B --> C{Decision}
+C -->|One| D[Result 1]
+C -->|Two| E[Result 2]
+```
+
+## 时序图 [文档 - live editor]
+
+```
+sequenceDiagram
+Alice->>John: Hello John, how are you?
+loop Healthcheck
+    John->>John: Fight against hypochondria
+end
+Note right of John: Rational thoughts!
+John-->>Alice: Great!
+John->>Bob: How about you?
+Bob-->>John: Jolly good!
+```
+```mermaid
 sequenceDiagram
 Alice->>John: Hello John, how are you?
 loop Healthcheck
@@ -67,43 +75,37 @@ Note right of John: Rational thoughts!
 John-->>Alice: Great!
 John->>Bob: How about you?
 Bob-->>John: Jolly good!
-
- -
- 甘特图
- [文档 - live editor] -
+```
+
+## 甘特图 [文档 - live editor]
+
+```
+gantt
+    section Section
+    Completed :done,    des1, 2014-01-06,2014-01-08
+    Active        :active,  des2, 2014-01-07, 3d
+    Parallel 1   :         des3, after des1, 1d
+    Parallel 2   :         des4, after des1, 1d
+    Parallel 3   :         des5, after des3, 1d
+    Parallel 4   :         des6, after des4, 1d
+```
+```mermaid
 gantt
-section Section
-Completed :done,    des1, 2014-01-06,2014-01-08
-Active        :active,  des2, 2014-01-07, 3d
-Parallel 1   :         des3, after des1, 1d
-Parallel 2   :         des4, after des1, 1d
-Parallel 3   :         des5, after des3, 1d
-Parallel 4   :         des6, after des4, 1d
-
- -
- 类图
- [文档 - live editor] -
+    section Section
+    Completed :done,    des1, 2014-01-06,2014-01-08
+    Active        :active,  des2, 2014-01-07, 3d
+    Parallel 1   :         des3, after des1, 1d
+    Parallel 2   :         des4, after des1, 1d
+    Parallel 3   :         des5, after des3, 1d
+    Parallel 4   :         des6, after des4, 1d
+```
+
+## 类图 [文档 - live editor]
+
+```
 classDiagram
-Class01 <|-- AveryLongClass : Cool
-<<interface>> Class01
+Class01 <|-- AveryLongClass : Cool
+<> Class01
 Class09 --> C2 : Where am i?
 Class09 --* C3
 Class09 --|> Class07
@@ -113,23 +115,33 @@ Class01 : size()
 Class01 : int chimp
 Class01 : int gorilla
 class Class10 {
-  <<service>>
+  <>
   int id
   size()
 }
-
 - -
- 状态图
- [文档 - live editor] -
+```
+```mermaid
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+<> Class01
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+class Class10 {
+  <>
+  int id
+  size()
+}
+```
+
+## 状态图 [文档 - live editor]
+
+```
 stateDiagram-v2
 [*] --> Still
 Still --> [*]
@@ -137,46 +149,37 @@ Still --> Moving
 Moving --> Still
 Moving --> Crash
 Crash --> [*]
-
 - -
- 饼图
- [文档 - live editor] -
+```
+```mermaid
+stateDiagram-v2
+[*] --> Still
+Still --> [*]
+Still --> Moving
+Moving --> Still
+Moving --> Crash
+Crash --> [*]
+```
+
+## 饼图 [文档 - live editor]
+
+```
+pie
+"Dogs" : 386
+"Cats" : 85
+"Rats" : 15
+```
+```mermaid
 pie
 "Dogs" : 386
 "Cats" : 85
 "Rats" : 15
-
 - -
- Git图
- [实验特性 - live editor] -
敬请期待!
- 用户体验旅程图
- [文档 - live editor] -
- 
+```
+
+## Git图 [实验特性 - live editor]
+
+## 用户体验旅程图 [文档 - live editor]
+
+```
   journey
     title My working day
     section Go to work
@@ -186,14 +189,30 @@ pie
     section Go home
       Go downstairs: 5: Me
       Sit down: 3: Me
-
 - User Journey Diagram -
+### 发布 + +对于有权限的同学来说，你可以通过以下步骤来完成发布操作： + +更新 `package.json` 中的版本号，然后执行如下命令： + +```sh +npm publish +``` + +以上的命令会将文件打包到 `dist` 目录并发布至 npmjs.org. ## 相关项目 @@ -207,6 +226,14 @@ Mermaid 是一个不断发展中的社区，并且还在接收新的贡献者。 关于如何贡献的详细信息可以在 [贡献指南](CONTRIBUTING.md) 中找到。 +## 安全 + +对于公开网站来说，从互联网上的用户处检索文本、存储供后续在浏览器中展示的内容可能是不安全的，理由是用户的内容可能嵌入一些数据加载完成之后就会运行的恶意脚本，这些对于 Mermaid 来说毫无疑问是一个风险，尤其是 mermaid 图表还包含了许多在 html 中使用的字符，这意味着我们难以使用常规的手段来过滤不安全代码，因为这些常规手段会造成图表损坏。我们仍然在努力对获取到的代码进行安全过滤并不断完善我们的程序，但很难保证没有漏洞。 + +作为拥有外部用户的网站的额外安全级别，我们很高兴推出一个新的安全级别，其中的图表在沙盒 iframe 中渲染，防止代码中的 javascript 被执行，这是在安全性方面迈出的一大步。 + +*很不幸的是，鱼与熊掌不可兼得，在这个场景下它意味着在可能的恶意代码被阻止时，也会损失部分交互能力*。 + ## 报告漏洞 如果想要报告漏洞，请发送邮件到 security@mermaid.live, 并附上问题的描述、复现问题的步骤、受影响的版本，以及解决问题的方案（如果有的话）。