zoukankan      html  css  js  c++  java
  • markdown文档

    前一阵子查了很多关于markdown的资料,现学现用,感觉自己棒棒的,差不多一个月的时间没有继续用,完了,一夜回到解放前,这次一定用整理出一份棒棒的学习笔记。(对于编写文档的时候需要用到的操作,可以做到随查随用)

    1. 标题

    对于各级标题,markdown中使用 # 来区分,
    # 标题内容 表示一级标题
    ## 标题内容 表示二级标题
    以此类推
    需要注意的是,# 与标题内容之间需要用空格隔开。

    2. 图片

    对于图片的插入格式,通常为![](./img/1.png),其中./img/1.png表示图片的目录

    上述操作是最常规的操作,那么,显示的过程中,

    2.1 如何确定设置图片的大小呢?

    • 原始图片
      ![](https://img2020.cnblogs.com/blog/1948888/202005/1948888-20200524080507577-836254838.jpg)(图片看起来好大啊)

    • 修改图片大小
      <img src="https://img2020.cnblogs.com/blog/1948888/202005/1948888-20200524080507577-836254838.jpg" width="500" height="313" />(利用html标签设置宽度width和高度height,其实这也是typora软件自带的进行图片大小处理的方法)
      图片替换文本

    2.2 图片如何居中显示呢?

    <center>
          <img src="https://img2020.cnblogs.com/blog/1948888/202005/1948888-20200524080507577-836254838.jpg" width="500" height="313">
    </center>
    

    上面是一张图片的居中显示,如果是多张图片的居中并排显示呢?

    <center>
          <img src="https://img2020.cnblogs.com/blog/1948888/202005/1948888-20200524080507577-836254838.jpg" width="200" height="120">
          <img src="https://img2020.cnblogs.com/blog/1948888/202005/1948888-20200524083855961-584091074.jpg" width="200" height="120">
          <img src="https://img2020.cnblogs.com/blog/1948888/202005/1948888-20200524083927844-1544309027.jpg" width="200" height="120">
    </center>
    

    3. 文字

    一般的文字效果我们都熟悉,像是加粗、斜体、引用等,可以参考链接

    3.1 文字居中显示

    <center>
          图一,一只小兔子
    </center>
    
    图一,一只小兔子

    那么,我们就可以给图片加标题了

    <center>
          <img src="https://img2020.cnblogs.com/blog/1948888/202005/1948888-20200524080507577-836254838.jpg" width="500" height="313">
    </center>
    <center>
          图一,一只小兔子
    </center>
    
    图一,一只小兔子

    如果是居中并排显示的多张图片呢?

    <center>
          <img src="https://img2020.cnblogs.com/blog/1948888/202005/1948888-20200524080507577-836254838.jpg" width="200" height="120">
          <img src="https://img2020.cnblogs.com/blog/1948888/202005/1948888-20200524083855961-584091074.jpg" width="200" height="120">
          <img src="https://img2020.cnblogs.com/blog/1948888/202005/1948888-20200524083927844-1544309027.jpg" width="200" height="120">
    </center>
    <center>
    &nbsp;&nbsp;&nbsp;
    图一,一只小兔子&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    图二,风景画 
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    图三,山水画
    </center>
    
        图一,一只小兔子               图二,风景画                               图三,山水画

    我太难了,不过总算有效果了,要是大佬有什么好办法,欢迎评论指导!

    3.2 文字显示问题(位置、大小、字体)

    参考链接

    <p align="left"><font size="5" face="黑体" color="#dd0000">图一,一只小兔子 </font></p>
    <p align="center"><font size="10" face="宋体" color="#0000dd">图二,风景画 </font> </p>
    <p align="right"><table><font size="15" face="微软雅黑" color="#006666">图三,山水画</font> </p>  
    

    图一,一只小兔子

    图二,风景画

    图三,山水画

    对于背景色的操作,在参考链接中存在,需要可以查找,本人使用时,没能很好的调整。

    3.3 文字图片并排显示

    <div align="right">
          兔的眼球呈圆形,单眼视角180°,所以兔用单眼看东西。兔的品种不同、毛色不同,其眼的颜色也不同。兔子的眼睛有:红色,蓝色,黑色,灰色等各种颜色,也有的兔子左右两只眼睛的颜色不一样。因为兔子是夜行动物,所以它的眼睛能大量聚光,即使在微暗处也能看到东西。另外,由于兔子的眼睛长在脸的两侧,因此它的视野宽阔,对自己周围的东西看得很清楚,有人说兔子连自己的脊梁都能看到。不过,它不能辨别立体的东西,对近在眼前的东西也看不清楚。兔子眼睛的颜色与它们的皮毛颜色有关系,黑兔子的眼睛在灯光下是黑色的,灰兔子的眼睛是灰色的,白兔子的眼睛红色的。那为什么我们看到小白兔的眼睛是红色的呢?这是因为白兔眼睛里的血丝(毛细血管)反射了外界光线,透明的眼睛就显出红色。
    小兔是有各种颜色的,它们的眼睛也是有不一样颜色的。那是因为它们身体里有一种叫色素的东西。兔子眼睛的颜色与它们的皮毛颜色有关系。 
    <img src="https://img2020.cnblogs.com/blog/1948888/202005/1948888-20200524080507577-836254838.jpg" width="500" height="313">
    </div>
    

    没有成功.

    4. 公式

    参考链接

    4.1 基本形式

    对于在markdown文档中插入的公式,有两种形式,

    一种是放在文字中的用$公式内容$

    另一种是另起一行的公式$$公式内容$$

    4.2 特殊字符

    1. 希腊字符
    输入 显示 输入 显示 输入 显示 输入 显示
    alpha (alpha) A (A) eta (eta) B (B)
    gamma (gamma) Gamma (Gamma) delta (delta) Delta (Delta)
    epsilon (epsilon) E (E) zeta (zeta) Z (Z)
    eta (eta) H (H) heta ( heta) Theta (Theta)
    iota (iota) I (I) kappa (kappa) K (K)
    lambda (lambda) Lambda (Lambda) mu (mu) M (M)
    u ( u) N (N) xi (xi) Xi (Xi)
    o (o) O (O) pi (pi) Pi (Pi)
    ho ( ho) P (P) sigma (sigma) Sigma (Sigma)
    au ( au) T (T) upsilon (upsilon) Upsilon (Upsilon)
    phi (phi) Phi (Phi) chi (chi) X (X)
    psi (psi) Psi (Psi) omega (omega) Omega (Omega)
    partial (partial)

    注意,其中有的字符分为大小写两种形式。

    1. 关系运算符
    输入 显示 输入 显示 输入 显示 输入 显示
    pm (pm) imes ( imes) div (div) mid (mid)
    mid ( mid) cdot (cdot) circ (circ) ast (ast)
    igodot (igodot) igotimes (igotimes) igoplus (igoplus) leq (leq)
    geq (geq) eq ( eq) approx (approx) equiv (equiv)
    sum (sum) prod (prod) coprod (coprod) ackslash (ackslash)
    1. 集合运算符
    输入 显示 输入 显示 输入 显示
    emptyset (emptyset) in (in) otin ( otin)
    subset (subset) supset (supset) subseteq (subseteq)
    supseteq (supseteq) igcap (igcap) igcup (igcup)
    igvee (igvee) igwedge (igwedge) iguplus (iguplus)
    1. 对数运算
    输入 显示 输入 显示 输入 显示
    log (log) lg (lg) ln (ln)
    1. 三角运算
    输入 显示 输入 显示 输入 显示
    30^circ (30^circ) ot (ot) angle A (angle A)
    sin (sin) cos (cos) an ( an)
    csc (csc) sec (sec) cot (cot)
    1. 微积分运算符
    输入 显示 输入 显示 输入 显示
    int (int) iint (iint) iiint (iiint)
    iiiint (iiiint) oint (oint) prime (prime)
    lim (lim) infty (infty) abla ( abla)
    lim_{x o1} $$lim_{x o1}$$

    [lim_{x o1} ]

    1. 逻辑运算符
    输入 显示 输入 显示 输入 显示
    ecause (ecause) herefore ( herefore)
    forall (forall) exists (exists) otsubset ( otsubset)
    ot< ( ot<) ot> ( ot>) ot= ( ot=)
    1. 戴帽符号
    输入 显示 输入 显示
    hat{xy} (hat{xy}) widehat{xyz} (widehat{xyz})
    ilde{xy} ( ilde{xy}) widetilde{xyz} (widetilde{xyz})
    check{x} (check{x}) reve{y} (reve{y})
    grave{x} (grave{x}) acute{y} (acute{y})
    1. 连线符号
    输入 显示
    fbox{a+b+c+d} (fbox{a+b+c+d})
    overleftarrow{a+b+c+d} (overleftarrow{a+b+c+d})
    overrightarrow{a+b+c+d} (overrightarrow{a+b+c+d})
    overleftrightarrow{a+b+c+d} (overleftrightarrow{a+b+c+d})
    underleftarrow{a+b+c+d} (underleftarrow{a+b+c+d})
    underrightarrow{a+b+c+d} (underrightarrow{a+b+c+d})
    underleftrightarrow{a+b+c+d} (underleftrightarrow{a+b+c+d})
    overline{a+b+c+d} (overline{a+b+c+d})
    underline{a+b+c+d} (underline{a+b+c+d})
    overbrace{a+b+c+d}^{Sample} (overbrace{a+b+c+d}^{Sample})
    underbrace{a+b+c+d}_{Sample} (underbrace{a+b+c+d}_{Sample})
    overbrace{a+underbrace{b+c}_{1.0}+d}^{2.0} (overbrace{a+underbrace{b+c}_{1.0}+d}^{2.0})
    underbrace{acdot acdots a}_{b ext{ times}} (underbrace{acdot acdots a}_{b ext{ times}})
    underrightarrow{1℃/min} (underrightarrow{1℃/min})
    int_0^1 (int_0^1)
    1. 箭头符号
    • 推荐使用符号:
    输入 显示 输入 显示 输入 显示
    o ( o) mapsto (mapsto)
    implies (implies) iff (iff) impliedby (impliedby)
    • 其它可用符号:
    输入 显示 输入 显示
    uparrow (uparrow) Uparrow (Uparrow)
    downarrow (downarrow) Downarrow (Downarrow)
    leftarrow (leftarrow) Leftarrow (Leftarrow)
    ightarrow ( ightarrow) Rightarrow (Rightarrow)
    leftrightarrow (leftrightarrow) Leftrightarrow (Leftrightarrow)
    longleftarrow (longleftarrow) Longleftarrow (Longleftarrow)
    longrightarrow (longrightarrow) Longrightarrow (Longrightarrow)
    longleftrightarrow (longleftrightarrow) Longleftrightarrow (Longleftrightarrow)
    1. 字体的转换

      输入 说明 显示 输入 说明 显示
      m 罗马体 ( m{Sample}) cal 花体 (cal{SAMPLE})
      it 意大利体 (it{Sample}) Bbb 黑板粗体 (Bbb{SAMPLE})
      f 粗体 (f{Sample}) mit 数学斜体 (mit{SAMPLE})
      sf 等线体 (sf{Sample}) scr 手写体 (scr{SAMPLE})
      t 打字机体 ( t{Sample})
      frak 旧德式字体 (frak{Sample})

    4.3 公式编辑

    有了上面一些特殊符号做基础,我们接下来做的就是把他们整合起来。

    1. 大括号和行标

    $$
    fleft(
       left[ 
         frac{
           1+left{x,y
    ight}
         }{
           left(
              frac{x}{y}+frac{y}{x}
           
    ight)
           left(u+1
    ight)
         }+a
       
    ight]^{3/2}
    
    ight)
    	ag{行标}
    $$
    

    [fleft( left[ frac{ 1+left{x,y ight} }{ left( frac{x}{y}+frac{y}{x} ight) left(u+1 ight) }+a ight]^{3/2} ight) ag{行标} ]

    注,如果需要{},只需要在括号前加上转义字符即可。

    • 例子
    $ J_alpha(x) = sum_{m=0}^infty frac{(-1)^m}{m! Gamma (m + alpha + 1)} {left({ frac{x}{2} }
    ight)}^{2m + alpha} 	ext {,行内公式示例} $
    
    • 显示:$ J_alpha(x) = sum_{m=0}^infty frac{(-1)^m}{m! Gamma (m + alpha + 1)} {left({ frac{x}{2} } ight)}^{2m + alpha} ext {,行内公式示例} $

    • 例子:

    $$ J_alpha(x) = sum_{m=0}^infty frac{(-1)^m}{m! Gamma (m + alpha + 1)} {left({ frac{x}{2} }
    ight)}^{2m + alpha} 	ext {,独立公式示例} $$
    
    • 显示:$$ J_alpha(x) = sum_{m=0}^infty frac{(-1)^m}{m! Gamma (m + alpha + 1)} {left({ frac{x}{2} } ight)}^{2m + alpha} ext {,独立公式示例} $$

    • 例子:

    在公式 eqref{eq:sample} 中,我们看到了这个被自动编号的公式。
    
    egin{equation}
    E=mc^2 	ext{,自动编号公式示例}
    label{eq:Sample}
    end{equation}
    

    2. 如何输入上下标

    ^ 表示上标, _ 表示下标。如果上下标的内容多于一个字符,需要用 {} 将这些内容括成一个整体。上下标可以嵌套,也可以同时使用。

    • 例子:
    $$ x^{y^z}=(1+{
    m e}^x)^{-2xy^w} $$
    
    • 显示:$$ x{yz}=(1+{ m e}x){-2xy^w} $$

    另外,如果要在左右两边都有上下标,可以用 sideset 命令。

    • 例子:
    $$ sideset{^1_2}{^3_4}igotimes $$
    
    • 显示:$$sideset{1_2}{3_4}igotimes$$

    3. 如何输入括号和分隔符

    ()[]| 表示符号本身,使用 {} 来表示 {} 。当要显示大号的括号或分隔符时,要用 left ight 命令。

    一些特殊的括号:

    输入 显示 输入 显示
    langle (langle) angle ( angle)
    lceil (lceil) ceil ( ceil)
    lfloor (lfloor) floor ( floor)
    lbrace (lbrace) brace ( brace)
    • 例子:
    $$ f(x,y,z) = 3y^2z left( 3+frac{7x+5}{1+y^2} 
    ight) $$
    
    • 显示:$$ f(x,y,z) = 3y^2z left( 3+frac{7x+5}{1+y^2} ight) $$

    有时候要用 left. ight. 进行匹配而不显示本身。

    • 例子:
    $$ left. frac{{
    m d}u}{{
    m d}x} 
    ight| _{x=0} $$
    
    • 显示:$$ left. frac{{ m d}u}{{ m d}x} ight| _{x=0} $$

    4. 如何输入分数

    通常使用 frac {分子} {分母} 命令产生一个分数,分数可嵌套。
    便捷情况可直接输入 frac ab 来快速生成一个 (frac ab)
    如果分式很复杂,亦可使用 分子 over 分母 命令,此时分数仅有一层。

    • 例子:
    $$frac{a-1}{b-1} quad and quad {a+1over b+1}$$
    
    • 显示:$$frac{a-1}{b-1} quad and quad {a+1over b+1}$$

    5. 如何输入开方

    使用 sqrt [根指数,省略时为2] {被开方数} 命令输入开方。

    • 例子:
    $$sqrt{2} quad and quad sqrt[n]{3}$$
    
    • 显示:$$sqrt{2} quad and quad sqrt[n]{3}$$

    6. 如何输入省略号

    数学公式中常见的省略号有两种,ldots 表示与文本底线对齐的省略号,cdots 表示与文本中线对齐的省略号。

    • 例子:
    $$f(x_1,x_2,underbrace{ldots}_{
    m ldots} ,x_n) = x_1^2 + x_2^2 + underbrace{cdots}_{
    m cdots} + x_n^2$$
    
    • 显示:$$f(x_1,x_2,underbrace{ldots}{ m ldots} ,x_n) = x_1^2 + x_2^2 + underbrace{cdots}{ m cdots} + x_n^2$$

    7. 如何输入矢量

    使用 vec{矢量} 来自动产生一个矢量。也可以使用 overrightarrow 等命令自定义字母上方的符号。

    • 例子:
    $$vec{a} cdot vec{b}=0$$
    
    • 显示:$$vec{a} cdot vec{b}=0$$

    • 例子:

    $$overleftarrow{xy} quad and quad overleftrightarrow{xy} quad and quad overrightarrow{xy}$$
    
    • 显示:$$overleftarrow{xy} quad and quad overleftrightarrow{xy} quad and quad overrightarrow{xy}$$

    8. 如何输入积分

    使用 int_积分下限^积分上限 {被积表达式} 来输入一个积分。

    例子:

    $$int_0^1 {x^2} \,{
    m d}x$$
    

    显示:$$int_0^1 {x^2} ,{ m d}x$$

    本例中 \,{ m d} 部分可省略,但建议加入,能使式子更美观。

    9. 如何输入极限运算

    使用 lim_{变量 o 表达式} 表达式 来输入一个极限。如有需求,可以更改 o 符号至任意符号。

    例子:

    $$ lim_{n 	o +infty} frac{1}{n(n+1)} quad and quad lim_{xleftarrow{示例}} frac{1}{n(n+1)} $$
    

    显示:$$lim_{n o +infty} frac{1}{n(n+1)} quad and quad lim_{xleftarrow{示例}} frac{1}{n(n+1)}$$

    10. 如何输入累加、累乘运算

    使用 sum_{下标表达式}^{上标表达式} {累加表达式} 来输入一个累加。
    与之类似,使用 prod igcup igcap 来分别输入累乘、并集和交集。
    此类符号在行内显示时上下标表达式将会移至右上角和右下角。

    • 例子:
    $$sum_{i=1}^n frac{1}{i^2} quad and quad prod_{i=1}^n frac{1}{i^2} quad and quad igcup_{i=1}^{2} R$$
    
    • 显示:$$sum_{i=1}^n frac{1}{i^2} quad and quad prod_{i=1}^n frac{1}{i^2} quad and quad igcup_{i=1}^{2} R$$

    11. 如果你需要在不同的行显示对应括号,可以在每一行对应处使用 left. ight. 来放一个"影子"括号:

    • 例子:
    $$
    egin{aligned}
    a=&left(1+2+3+  cdots 
    ight. \
    & cdots+ left. infty-2+infty-1+infty
    ight)
    end{aligned}
    $$
    
    • 显示:

    [egin{aligned} a=&left(1+2+3+ cdots ight. \ & cdots+ left. infty-2+infty-1+infty ight) end{aligned} ]

    $$
    egin{aligned}
    a &= (1+2+3+cdots \
      & cdots + 4 + 5 + 6 )
    
    end{aligned}
    $$
    

    [egin{aligned} a &= (1+2+3+cdots \ & cdots + 4 + 5 + 6 ) end{aligned} ]

    注,&作为对齐标志,\作为换行标志。

    13. 如果你需要将行内显示的分隔符也变大,可以使用 middle 命令:

    • 例子:
    $$
    leftlangle  
      q
    middle|
      frac{frac{x}{y}}{frac{u}{v}}
    middle| 
       p 
    
    ight
    angle
    $$
    
    • 显示:

    [leftlangle q middle| frac{frac{x}{y}}{frac{u}{v}} middle| p ight angle ]

    14. 添加注释文字 ext

    ext {文字} 中仍可以使用 $公式$ 插入其它公式。

    • 例子:
    $$ f(n)= egin{cases} n/2, & 	ext {if $n$ is even} \ 3n+1, & 	ext{if $n$ is odd} end{cases} $$
    
    • 显示:

      [f(n)= egin{cases} n/2, & ext {if $n$ is even} \ 3n+1, & ext{if $n$ is odd} end{cases} ]

    15. 在字符间加入空格

    有四种宽度的空格可以使用: \,;quadqquad

    • 例子:
    $$ a \, b mid a ; b mid a quad b mid a qquad b $$
    
    • 显示:$$ a , b mid a ; b mid a quad b mid a qquad b $$

    当然,使用 ext {n个空格} 也可以达到同样效果。

    16. 添加删除线

    使用删除线功能必须声明 $$ 符号。

    在公式内使用 equire{cancel} 来允许 片段删除线 的显示。
    声明片段删除线后,使用 cancel{字符}cancel{字符}xcancel{字符}cancelto{字符} 来实现各种片段删除线效果。

    • 例子:
    $$
    
    equire{cancel}egin{array}{rl}
    verb|y+cancel{x}| & y+cancel{x}\
    verb|cancel{y+x}| & cancel{y+x}\
    verb|y+cancel{x}| & y+cancel{x}\
    verb|y+xcancel{x}| & y+xcancel{x}\
    verb|y+cancelto{0}{x}| & y+cancelto{0}{x}\
    verb+frac{1cancel9}{cancel95} = frac15+& frac{1cancel9}{cancel95} = frac15 \
    end{array}
    $$
    
    • 显示:

    [ equire{cancel} egin{array}{rl} verb|y+cancel{x}| & y+cancel{x}\ verb|cancel{y+x}| & cancel{y+x}\ verb|y+cancel{x}| & y+cancel{x}\ verb|y+xcancel{x}| & y+xcancel{x}\ verb|y+cancelto{0}{x}| & y+cancelto{0}{x}\ verb+frac{1cancel9}{cancel95} = frac15+& frac{1cancel9}{cancel95} = frac15 \ end{array} ]

    使用 equire{enclose} 来允许 整段删除线 的显示。
    声明整段删除线后,使用 enclose{删除线效果}{字符} 来实现各种整段删除线效果。
    其中,删除线效果有 horizontalstrikeverticalstrikeupdiagonalstrikedowndiagonalstrike,可叠加使用。

    • 例子:
    $$
    
    equire{enclose}egin{array}{rl}
    verb|enclose{horizontalstrike}{x+y}| & enclose{horizontalstrike}{x+y}\
    verb|enclose{verticalstrike}{frac xy}| & enclose{verticalstrike}{frac xy}\
    verb|enclose{updiagonalstrike}{x+y}| & enclose{updiagonalstrike}{x+y}\
    verb|enclose{downdiagonalstrike}{x+y}| & enclose{downdiagonalstrike}{x+y}\
    verb|enclose{horizontalstrike,updiagonalstrike}{x+y}| & enclose{horizontalstrike,updiagonalstrike}{x+y}\
    end{array}
    $$
    
    • 显示:

    [ equire{enclose}egin{array}{rl} verb|enclose{horizontalstrike}{x+y}| & enclose{horizontalstrike}{x+y}\ verb|enclose{verticalstrike}{frac xy}| & enclose{verticalstrike}{frac xy}\ verb|enclose{updiagonalstrike}{x+y}| & enclose{updiagonalstrike}{x+y}\ verb|enclose{downdiagonalstrike}{x+y}| & enclose{downdiagonalstrike}{x+y}\ verb|enclose{horizontalstrike,updiagonalstrike}{x+y}| & enclose{horizontalstrike,updiagonalstrike}{x+y}\ end{array} ]

    此外, enclose 命令还可以产生包围的边框和圆等,参见 MathML Menclose Documentation 以查看更多效果。

    4.4 矩阵

    1.如何输入无框矩阵

    在开头使用 begin{matrix},在结尾使用 end{matrix},在中间插入矩阵元素,每个元素之间插入 & ,并在每行结尾处使用 \
    使用矩阵时必须声明 $$$ 符号。

    • 例子:
    $$
            egin{matrix}
            1 & x & x^2 \
            1 & y & y^2 \
            1 & z & z^2 \
            end{matrix}
    $$
    
    • 显示:

    [egin{matrix} 1 & x & x^2 \ 1 & y & y^2 \ 1 & z & z^2 \ end{matrix} ]

    1. 如何输入边框矩阵

    在开头将 matrix 替换为 pmatrix bmatrix Bmatrix vmatrix Vmatrix

    • 例子:
    $ egin{matrix} 1 & 2 \ 3 & 4 \ end{matrix} $
    $ egin{pmatrix} 1 & 2 \ 3 & 4 \ end{pmatrix} $
    $ egin{bmatrix} 1 & 2 \ 3 & 4 \ end{bmatrix} $
    $ egin{Bmatrix} 1 & 2 \ 3 & 4 \ end{Bmatrix} $
    $ egin{vmatrix} 1 & 2 \ 3 & 4 \ end{vmatrix} $
    $ egin{Vmatrix} 1 & 2 \ 3 & 4 \ end{Vmatrix} $
    
    • 显示:
    matrix pmatrix bmatrix Bmatrix vmatrix Vmatrix
    $ egin{matrix} 1 & 2 3 & 4 end{matrix} $ $ egin{pmatrix} 1 & 2 3 & 4 end{pmatrix} $ $ egin{bmatrix} 1 & 2 3 & 4 end{bmatrix} $ $ egin{Bmatrix} 1 & 2 3 & 4 end{Bmatrix} $ $ egin{vmatrix} 1 & 2 3 & 4 end{vmatrix} $ $ egin{Vmatrix} 1 & 2 3 & 4 end{Vmatrix} $

    3.如何输入带省略符号的矩阵

    使用 cdots (cdots) , ddots (ddots) , vdots (vdots) 来输入省略符号。

    • 例子:
    $$
            egin{pmatrix}
            1 & a_1 & a_1^2 & cdots & a_1^n \
            1 & a_2 & a_2^2 & cdots & a_2^n \
            vdots & vdots & vdots & ddots & vdots \
            1 & a_m & a_m^2 & cdots & a_m^n \
            end{pmatrix}
    $$
    
    • 显示:

    [ egin{pmatrix} 1 & a_1 & a_1^2 & cdots & a_1^n \ 1 & a_2 & a_2^2 & cdots & a_2^n \ vdots & vdots & vdots & ddots & vdots \ 1 & a_m & a_m^2 & cdots & a_m^n \ end{pmatrix} ]

    4.如何输入带分割符号的矩阵

    详见"数组使用参考"。

    • 例子:
    $$
    left[
        egin{array}{cc|c}
          1&2&3\
          4&5&6
        end{array}
    
    ight]
    $$
    
    • 显示:

    [left[ egin{array}{cc|c} 1&2&3\ 4&5&6 end{array} ight] ]

    其中 cc|c 代表在一个三列矩阵中的第二和第三列之间插入分割线。

    5.如何输入行中矩阵

    若想在一行内显示矩阵,
    使用igl(egin{smallmatrix} ... end{smallmatrix}igr)

    • 例子:
    $igl( egin{smallmatrix} a & b \ c & d end{smallmatrix} igr)$ 。
    
    • 显示:这是一个行中矩阵的示例 (igl( egin{smallmatrix} a & b \ c & d end{smallmatrix} igr))

    4.5 方程式序列

    1.如何输入一个方程式序列

    人们经常想要一列整齐且居中的方程式序列。使用 egin{align}…end{align} 来创造一列方程式,其中在每行结尾处使用 \
    使用方程式序列无需声明公式符号 $$$

    请注意 {align} 语句是 自动编号 的,使用 {align*} 声明停止自动编号(^wuyufei批注)。

    • 例子:
    egin{align}
    sqrt{37} & = sqrt{frac{73^2-1}{12^2}} \
     & = sqrt{frac{73^2}{12^2}cdotfrac{73^2-1}{73^2}} \ 
     & = sqrt{frac{73^2}{12^2}}sqrt{frac{73^2-1}{73^2}} \
     & = frac{73}{12}sqrt{1 - frac{1}{73^2}} \ 
     & approx frac{73}{12}left(1 - frac{1}{2cdot73^2}
    ight)
    end{align}
    
    • 显示:

    [egin{align}sqrt{37} & = sqrt{frac{73^2-1}{12^2}} \ & = sqrt{frac{73^2}{12^2}cdotfrac{73^2-1}{73^2}} \ & = sqrt{frac{73^2}{12^2}}sqrt{frac{73^2-1}{73^2}} \ & = frac{73}{12}sqrt{1 - frac{1}{73^2}} \ & approx frac{73}{12}left(1 - frac{1}{2cdot73^2} ight)end{align} ]

    本例中每行公式的编号续自 如何插入公式 中的自动编号公式 eqref{eq:sample} 。

    2.在一个方程式序列的每一行中注明原因

    {align} 中灵活组合 ext ag 语句。 ag 语句编号优先级高于自动编号。

    • 例子:
    egin{align}
       v + w & = 0  &	ext{Given} 	ag 1\
       -w & = -w + 0 & 	ext{additive identity} 	ag 2\
       -w + 0 & = -w + (v + w) & 	ext{equations $(1)$ and $(2)$}
    end{align}
    
    • 显示:

    [egin{align} v + w & = 0 & ext{Given} ag 1\ -w & = -w + 0 & ext{additive identity} ag 2\ -w + 0 & = -w + (v + w) & ext{equations $(1)$ and $(2)$}end{align} ]

    本例中第一、第二行的自动编号被 ag 语句覆盖,第三行的编号为自动编号。

    4.6 条件表达式使用参考

    1.如何输入一个条件表达式

    使用 begin{cases} 来创造一组条件表达式,在每一行条件中插入 & 来指定需要对齐的内容,并在每一行结尾处使用 \,以 end{cases} 结束。
    条件表达式无需声明 $$$ 符号。

    • 例子:
    $$
            f(n) =
            egin{cases}
            n/2,  & 	ext{if $n$ is even} \
            3n+1, & 	ext{if $n$ is odd}
            end{cases}
    $$
    
    • 显示:

    [ f(n) = egin{cases} n/2, & ext{if $n$ is even} \ 3n+1, & ext{if $n$ is odd} end{cases} ]

    2.如何输入一个左侧对齐的条件表达式

    若想让文字在 左侧对齐显示 ,则有如下方式:

    • 例子:
    $$
            left.
            egin{array}{l}
            	ext{if $n$ is even:}&n/2\
            	ext{if $n$ is odd:}&3n+1
            end{array}
            
    ight}
            =f(n)
    $$
    
    • 显示:

    [ left. egin{array}{l} ext{if $n$ is even:}&n/2\ ext{if $n$ is odd:}&3n+1 end{array} ight} =f(n) ]

    3.如何使条件表达式适配行高

    在一些情况下,条件表达式中某些行的行高为非标准高度,此时使用 \[2ex] 语句代替该行末尾的 \ 来让编辑器适配。

    • 例子:
      不适配[2ex]
    $$
    f(n) = 
    egin{cases}
    frac{n}{2},  & 	ext{if $n$ is even} \
    3n+1, & 	ext{if $n$ is odd}
    end{cases}
    $$
    
    适配[2ex]
    $$
    f(n) = 
    egin{cases}
    frac{n}{2},  & 	ext{if $n$ is even} \[2ex]
    3n+1, & 	ext{if $n$ is odd}
    end{cases}
    $$
    
    • 显示:
      不适配[2ex]

    [ f(n) = egin{cases} frac{n}{2}, & ext{if $n$ is even} \ 3n+1, & ext{if $n$ is odd} end{cases} ]

    适配[2ex]

    [f(n) = egin{cases} frac{n}{2}, & ext{if $n$ is even} \[2ex] 3n+1, & ext{if $n$ is odd} end{cases} ]

    一个 [ex] 指一个 "X-Height",即x字母高度。可以根据情况指定多个 [ex],如 [3ex][4ex] 等。
    其实可以在任何地方使用 \[2ex] 语句,只要你觉得合适。

    4.7 数组与表格使用参考

    1.如何输入一个数组或表格

    通常,一个格式化后的表格比单纯的文字或排版后的文字更具有可读性。数组和表格均以 begin{array} 开头,并在其后定义列数及每一列的文本对齐属性,c l r 分别代表居中、左对齐及右对齐。若需要插入垂直分割线,在定义式中插入 | ,若要插入水平分割线,在下一行输入前插入 hline 。与矩阵相似,每行元素间均须要插入 & ,每行元素以 \ 结尾,最后以 end{array} 结束数组。
    使用单个数组或表格时无需声明 $$$ 符号。

    • 例子:
    egin{array}{c|lcr}
    n & 	ext{左对齐} & 	ext{居中对齐} & 	ext{右对齐} \
    hline
    1 & 0.24 & 1 & 125 \
    2 & -1 & 189 & -8 \
    3 & -20 & 2000 & 1+10i
    end{array}
    
    • 显示:

    [egin{array}{c|lcr}n & ext{左对齐} & ext{居中对齐} & ext{右对齐} \hline1 & 0.24 & 1 & 125 \2 & -1 & 189 & -8 \3 & -20 & 2000 & 1+10iend{array} ]

    2.如何输入一个嵌套的数组或表格

    多个数组/表格可 互相嵌套 并组成一组数组/一组表格。
    使用嵌套前必须声明 $$ 符号。

    • 例子:
    $$
    % outer vertical array of arrays 外层垂直表格
    egin{array}{c}
        % inner horizontal array of arrays 内层水平表格
        egin{array}{cc}
            % inner array of minimum values 内层"最小值"数组
            egin{array}{c|cccc}
            	ext{min} & 0 & 1 & 2 & 3\
            hline
            0 & 0 & 0 & 0 & 0\
            1 & 0 & 1 & 1 & 1\
            2 & 0 & 1 & 2 & 2\
            3 & 0 & 1 & 2 & 3
            end{array}
        &
            % inner array of maximum values 内层"最大值"数组
            egin{array}{c|cccc}
            	ext{max}&0&1&2&3\
            hline
            0 & 0 & 1 & 2 & 3\
            1 & 1 & 1 & 2 & 3\
            2 & 2 & 2 & 2 & 3\
            3 & 3 & 3 & 3 & 3
            end{array}
        end{array}
        % 内层第一行表格组结束
        \
        % inner array of delta values 内层第二行Delta值数组
            egin{array}{c|cccc}
            Delta&0&1&2&3\
            hline
            0 & 0 & 1 & 2 & 3\
            1 & 1 & 0 & 1 & 2\
            2 & 2 & 1 & 0 & 1\
            3 & 3 & 2 & 1 & 0
            end{array}
            % 内层第二行表格组结束
    end{array}
    $$
    
    • 显示:

    [% outer vertical array of arrays 外层垂直表格 egin{array}{c} % inner horizontal array of arrays 内层水平表格 egin{array}{cc} % inner array of minimum values 内层"最小值"数组 egin{array}{c|cccc} ext{min} & 0 & 1 & 2 & 3\ hline 0 & 0 & 0 & 0 & 0\ 1 & 0 & 1 & 1 & 1\ 2 & 0 & 1 & 2 & 2\ 3 & 0 & 1 & 2 & 3 end{array} & % inner array of maximum values 内层"最大值"数组 egin{array}{c|cccc} ext{max}&0&1&2&3\ hline 0 & 0 & 1 & 2 & 3\ 1 & 1 & 1 & 2 & 3\ 2 & 2 & 2 & 2 & 3\ 3 & 3 & 3 & 3 & 3 end{array} end{array} % 内层第一行表格组结束 \ % inner array of delta values 内层第二行Delta值数组 egin{array}{c|cccc} Delta&0&1&2&3\ hline 0 & 0 & 1 & 2 & 3\ 1 & 1 & 0 & 1 & 2\ 2 & 2 & 1 & 0 & 1\ 3 & 3 & 2 & 1 & 0 end{array} % 内层第二行表格组结束 end{array} ]

    3.如何输入一个方程组

    使用 egin{array}…end{array}left{… ight. 来创建一个方程组。

    • 例子:
    $$
    left{ 
    egin{array}{c}
    a_1x+b_1y+c_1z=d_1 \ 
    a_2x+b_2y+c_2z=d_2 \ 
    a_3x+b_3y+c_3z=d_3
    end{array}
    
    ight. 
    $$
    
    • 显示:

    [left{ egin{array}{c} a_1x+b_1y+c_1z=d_1 \ a_2x+b_2y+c_2z=d_2 \ a_3x+b_3y+c_3z=d_3 end{array} ight. ]

    或者使用条件表达式组 egin{cases}…end{cases} 来实现相同效果:

    • 例子:
    egin{cases}
    a_1x+b_1y+c_1z=d_1 \ 
    a_2x+b_2y+c_2z=d_2 \ 
    a_3x+b_3y+c_3z=d_3
    end{cases}
    
    • 显示:

    [egin{cases} a_1x+b_1y+c_1z=d_1 \ a_2x+b_2y+c_2z=d_2 \ a_3x+b_3y+c_3z=d_3 end{cases} ]

    4.8 连分数使用参考

    1.如何输入一个连分式

    就像输入分式时使用 frac 一样,使用 cfrac 来创建一个连分数。

    • 例子:
    $$
    x = a_0 + cfrac{1^2}{a_1
              + cfrac{2^2}{a_2
              + cfrac{3^2}{a_3 + cfrac{4^4}{a_4 + cdots}}}}
    $$
    
    • 显示:

    [x = a_0 + cfrac{1^2}{a_1 + cfrac{2^2}{a_2 + cfrac{3^2}{a_3 + cfrac{4^4}{a_4 + cdots}}}} ]

    不要使用普通的 fracover 来创建,否则会看起来 很恶心

    • 反例:
    $$
    x = a_0 + frac{1^2}{a_1
              + frac{2^2}{a_2
              + frac{3^2}{a_3 + frac{4^4}{a_4 + cdots}}}}
    $$
    
    • 显示:

    [x = a_0 + frac{1^2}{a_1 + frac{2^2}{a_2 + frac{3^2}{a_3 + frac{4^4}{a_4 + cdots}}}} ]

    当然,你可以使用 frac 来表达连分数的 紧缩记法

    • 例子:
    $$
    x = a_0 + frac{1^2}{a_1+}
              frac{2^2}{a_2+}
              frac{3^2}{a_3 +} frac{4^4}{a_4 +} cdots
    $$
    
    • 显示:

    [x = a_0 + frac{1^2}{a_1+} frac{2^2}{a_2+} frac{3^2}{a_3 +} frac{4^4}{a_4 +} cdots ]

    连分数通常都太大以至于不易排版,所以建议在连分数前后声明 $$ 符号,或使用像 [a0;a1,a2,a3,…] 一样的紧缩记法。

    4.9 交换图表使用参考

    1.如何输入一个交换图表

    使用一行 $ equire{AMScd} $ 语句来允许交换图表的显示。
    声明交换图表后,语法与矩阵相似,在开头使用 begin{CD},在结尾使用 end{CD},在中间插入图表元素,每个元素之间插入 & ,并在每行结尾处使用 \

    • 例子:
    $
    equire{AMScd}$
    egin{CD}
        A @>a>> B\
        @V b V V# @VV c V\
        C @>>d> D
    end{CD}
    
    • 显示:
      ( equire{AMScd})

    [egin{CD} A @>a>> B\ @V b V V# @VV c V\ C @>>d> Dend{CD} ]

    其中,@>>> 代表右箭头、@<<< 代表左箭头、@VVV 代表下箭头、@AAA 代表上箭头、@= 代表水平双实线、@| 代表竖直双实线、@.代表没有箭头。
    @>>>>>> 之间任意插入文字即代表该箭头的注释文字。

    • 例子:
    egin{CD}
        A @>>> B @>{	ext{very long label}}>> C \
        @. @AAA @| \
        D @= E @<<< F
    end{CD}
    
    • 显示:

    [egin{CD} A @>>> B @>{ ext{very long label}}>> C \ @. @AAA @| \ D @= E @<<< Fend{CD} ]

    在本例中, "very long label"自动延长了它所在箭头以及对应箭头的长度。

    4.10 一些特殊的注意事项

    !! 本段内容为个人翻译,可能有不准确之处 !!

    These are issues that won't affect the correctness of formulas, but might make them look significantly better or worse. Beginners should feel free to ignore this advice; someone else will correct it for them, or more likely nobody will care.

    现在指出的小问题并不会影响方程式及公式等的正确显示,但能让它们看起来明显更好看。初学者可无视这些建议,自然会有强迫症患者替你们改掉它的,或者更可能地,根本没人发现这些问题。

    Don't use frac in exponents or limits of integrals; it looks bad and can be confusing, which is why it is rarely done in professional mathematical typesetting. Write the fraction horizontally, with a slash:

    在以e为底的指数函数、极限和积分中尽量不要使用 frac 符号:它会使整段函数看起来很怪,而且可能产生歧义。也正是因此它在专业数学排版中几乎从不出现。
    横着写这些分式,中间使用斜线间隔 / (用斜线代替分数线)。

    • 例子:
    egin{array}{cc}
    mathrm{Bad} & mathrm{Better} \
    hline \
    e^{ifrac{pi}2} quad e^{frac{ipi}2}& e^{ipi/2} \
    int_{-fracpi2}^fracpi2 sin x\,dx & int_{-pi/2}^{pi/2}sin x\,dx \
    end{array}
    
    • 显示:

    [egin{array}{cc}mathrm{Bad} & mathrm{Better} \hline \e^{ifrac{pi}2} quad e^{frac{ipi}2}& e^{ipi/2} \int_{-fracpi2}^fracpi2 sin x\,dx & int_{-pi/2}^{pi/2}sin x\,dx \end{array} ]

    The | symbol has the wrong spacing when it is used as a divider, for example in set comprehensions. Use mid instead:

    | 符号在被当作分隔符时会产生错误的间隔,因此在需要分隔时最好使用 mid 来代替它。

    • 例子:
    egin{array}{cc}
    mathrm{Bad} & mathrm{Better} \
    hline \
    {x|x^2inBbb Z} & {xmid x^2inBbb Z} \
    end{array}
    
    • 显示:

    [egin{array}{cc}mathrm{Bad} & mathrm{Better} \hline \{x|x^2inBbb Z} & {xmid x^2inBbb Z} \end{array} ]

    For double and triple integrals, don't use intint or intintint. Instead use the special forms iint and iiint:

    使用多重积分符号时,不要多次使用 int 来声明,直接使用 iint 来表示 二重积分 ,使用 iiint 来表示 三重积分 等。对于无限次积分,可以用 int cdots int 表示。

    • 例子:
    egin{array}{cc}
    mathrm{Bad} & mathrm{Better} \
    hline \
    intint_S f(x)\,dy\,dx & iint_S f(x)\,dy\,dx \
    intintint_V f(x)\,dz\,dy\,dx & iiint_V f(x)\,dz\,dy\,dx
    end{array}
    
    • 显示:

      [egin{array}{cc} mathrm{Bad} & mathrm{Better} \ hline \ intint_S f(x)\,dy\,dx & iint_S f(x)\,dy\,dx \ intintint_V f(x)\,dz\,dy\,dx & iiint_V f(x)\,dz\,dy\,dx end{array} ]

    [无限次积分:int cdots int ]

    Use \,, to insert a thin space before differentials; without this (TeX) will mash them together:

    在微分符号前加入 \, 来插入一个小的间隔空隙;没有 \, 符号的话,(TeX) 将会把不同的微分符号堆在一起。

    • 例子:
    egin{array}{cc}
    mathrm{Bad} & mathrm{Better} \
    hline \
    iiint_V f(x){
    m d}z {
    m d}y {
    m d}x & iiint_V f(x)\,{
    m d}z\,{
    m d}y\,{
    m d}x
    end{array}
    
    • 显示:

      [egin{array}{cc} mathrm{Bad} & mathrm{Better} \ hline \ iiint_V f(x){ m d}z { m d}y { m d}x & iiint_V f(x)\,{ m d}z\,{ m d}y\,{ m d}x end{array} ]

    5. Mermaid

    5.1 什么是Mermaid?

    mermaid,美人鱼, 是一个类似 markdown,用文本语法来描述文档图形(流程图时序图甘特图)的工具,您可以在文档中嵌入一段 mermaid 文本来生成 SVG 形式的图形。如:

    ​```mermaid
    graph LR;
        A --> B;
        A --> C;
        B --> D;
        C --> D;
    ​```
    
    graph LR; A --> B; A --> C; B --> D; C --> D;

    是不是很像一条鱼呢?

    5.2 实例操作

    参考链接

    本结我们先给出几个实例,之后再将其拆分开,研究其组成部分。

    1. 实例1(流程图)
    ​```mermaid
    graph LR;
      Portal-->|发布/更新配置|Apollo配置中心;
      Apollo配置中心-->|实时推送|App;
      App-->|实时查询|Apollo配置中心;
    ​```
    
    graph LR;   Portal-->|发布/更新配置|Apollo配置中心;   Apollo配置中心-->|实时推送|App;   App-->|实时查询|Apollo配置中心;
    1. 实例2(流程图)
    ​```mermaid
    graph TB;
      client-->|2 findConfigServices|LoadBalancer;
      LoadBalancer-->|3 findService|metaServer;
      metaServer-->Eureka;
      client-->|4 access via ip:port/client load balance/error retry|ConfigService;
      ConfigService-->|1 register/cancel|Eureka;
      ConfigService-->|read/write|ConfigDB;
    ​```
    
    graph TB;   client-->|2 findConfigServices|LoadBalancer;   LoadBalancer-->|3 findService|metaServer;   metaServer-->Eureka;   client-->|4 access via ip:port/client load balance/error retry|ConfigService;   ConfigService-->|1 register/cancel|Eureka;   ConfigService-->|read/write|ConfigDB;
    1. 实例3(流程图)
    ​```mermaid
    graph LR;
      client---core;
      client---common;
      core---common;
      common---portal;
      common---Biz;
      Biz---ConfigService;
      Biz---AdminService;
    ​```
    
    graph LR;   client---core;   client---common;   core---common;   common---portal;   common---Biz;   Biz---ConfigService;   Biz---AdminService;
    graph  TB(top--botom 上下排列)
    
    graph BT  (botom--top)
    
    graph  LR(left--right 左右排列)
    
    graph  RL (right--left)
    
    -->    在流程图中显示——>
    
    ---    在流程图中显示——
    
    1. 实例4(时序图)
    ​```mermaid
    sequenceDiagram
        participant Alice
        participant Bob
        Alice->>John:hello John
        loop healthcheck
            John-->>John:fight against
        end
        Note right of John:rational
        
        John->>Alice:great!
        John->>Bob:how about you
        Bob->>John:good!
    
    ​```
    
    sequenceDiagram participant Alice participant Bob Alice->>John:hello John loop healthcheck John-->>John:fight against end Note right of John:rational John->>Alice:great! John->>Bob:how about you Bob->>John:good!
    ​```mermaid
    gantt
       dateFormat YYYY-MM-DD
       title Adding GANTT diagram functionality to mermaid
       section A section
       Completed task  :done, des1, 2014-01-06,2014-01-08
       Active task     :active, des2, 2014-01-09, 3d
       future task     :     des3, after des2, 5d
       future task2    :     des4, after des3, 5d
       
       section Critical tasks
       Completed task in the critical line :crit, done, 2014-01-06,24h
       Implement parser and json      :crit, done, after des1, 2d
       Create tests for parser       :crit, active, 3d
       Future task in critical line     :crit, 5d
       Create tests for renderer      :2d
       Add to ,mermaid           :1d
    ​```
    
    gantt    dateFormat YYYY-MM-DD    title Adding GANTT diagram functionality to mermaid    section A section    Completed task  :done, des1, 2014-01-06,2014-01-08    Active task     :active, des2, 2014-01-09, 3d    future task     :    des3, after des2, 5d    future task2    :    des4, after des3, 5d    section Critical tasks    Completed task in the critical line :crit, done, 2014-01-06,24h    Implement parser and json      :crit, done, after des1, 2d    Create tests for parser       :crit, active, 3d    Future task in critical line     :crit, 5d    Create tests for renderer      :2d    Add to ,mermaid           :1d

    5.3 细节讲解

    参考链接

    ​```mermaid
    graph LR;
    	A --> B;
    	A --> C;
    	C --> D;
    ​```
    
    graph LR; A --> B; A --> C; C --> D;
    1. 整体布局

      第一行的graph LRgraph指定是一个图,第二个LR指定图的方向,所有的方向关键词为:

      • TB - top bottom
      • BT - bottom top
      • RL - right left
      • LR - left right
      • TD - same as TB

      注,对于流程图,通过graph创建图;时序图通过sequenceDiagram创建;甘特图通过gantt创建。由于目前需要流程图更多一点,另外两部分的等以后需要在进行补充。

    2. 之后的A,B,C等都是节点的标识(标识中不能使用空格)

    3. 节点默认只显示标识,但也可以通过如下方法控制其显示

      ​```mermaid
      graph TD;
      	A;
      	B(B);
      	C((C));
      	D>D];
      	E{E};
      ​```
      
      graph TD; A; B(B); C((C)); D>D]; E{E};
      1. 连线

        ​```mermaid
        graph LR;
            A[A] --> B[B]; 
            A1[A] --- B1[B]; 
            A4[A] -.- B4[B]; 
            A5[A] -.-> B5[B]; 
            A7[A] ==> B7[B]; 
            A2[A] -- 描述 --- B2[B];
            A3[A] -- 描述 --> B3[B];
            A6[A] -. 描述 .-> B6[B];
            A8[A] == 描述 ==> B8[B];
        ​```
        
        graph LR; A[A] --> B[B]; A1[A] --- B1[B]; A4[A] -.- B4[B]; A5[A] -.-> B5[B]; A7[A] ==> B7[B]; A2[A] -- 描述 --- B2[B]; A3[A] -- 描述 --> B3[B]; A6[A] -. 描述 .-> B6[B]; A8[A] == 描述 ==> B8[B];
        1. Subgraph
           ```mermaid
           graph TB;
                   subgraph one
                   a1-->a2
                   end;
                   subgraph two
                   b1-->b2
                   end;
                
                   subgraph three
                   c1-->c2
                   end;
                
                	c1-->a2;
           ```
    
    graph TB; subgraph one a1-->a2 end; subgraph two b1-->b2 end; subgraph three c1-->c2 end; c1-->a2;
    1. 定制一个节点

      ​```mermaid
      graph LR;
          id1(Start)-->id2(Stop);
          style id1 fill:#f9f,stroke:#333,stroke-4px;
          style id2 fill:#bbf,stroke:#f66,stroke-;
      ​```
      
      graph LR; id1(Start)-->id2(Stop); style id1 fill:#f9f,stroke:#333,stroke-4px; style id2 fill:#bbf,stroke:#f66,stroke-;
    2. 节点内换行问题:

      ​```mermaid
      graph TB;
      A[长方形] --> |描述| B((圆));
      A --> C(圆角长方形圆角长方形<br>圆角长方形圆角长方形<br>圆角长方形圆角长方形)
      B --> D{菱形};
      C --> D;
      ​```
      
      graph TB; A[长方形] --> |描述| B((圆)); A --> C(圆角长方形圆角长方形<br>圆角长方形圆角长方形<br>圆角长方形圆角长方形) B --> D{菱形}; C --> D;

    6. UML

    6.1 什么是UML?

    UML(Unified Modeling Language)是一种统一建模语言,为面向对象开发系统的产品进行说明、可视化、和编制文档的一种标准语言。下面将对UML的九种图+包图的基本概念进行介绍以及各个图的使用场景。

    参考文章【本人觉得这篇参考文章写的很棒了,就不再卖弄了】

    graph LR; A(UML九种图) --- B(用例视图) B(用例视图) --- b(用例图) A(UML九种图) --- C(设计视图) C(设计视图) --- c1(类图) C(设计视图) --- c2(对象图) A(UML九种图) --- D(进程试图) D(进程试图) --- d1(序列图) D(进程试图) --- d2(协作图) D(进程试图) --- d3(状态图) D(进程试图) --- d4(活动图) A(UML九种图) --- E(实现视图) E(实现视图) --- e(构件图) A(UML九种图) --- F(拓扑视图) F(拓扑视图) --- f(部署图)

    【现学现卖,先用Mermaid画一个框架】

    我们可以根据软件开发过程各个阶段的需求所需要的来类推到各个领域。

    img

    6.2 UML与markdown

    1. 序列图
    ​``` sequence
    title: 三个臭皮匠的故事
    participant 小王
    participant 小李
    participant 小异常
    
    note left of 小王: 我是小王
    note over 小李: 我是小李
    note right of 小异常: 大家好!
    我是小异常
    
    小王->小王: 小王想:今天要去见两个好朋友咯~
    小王->小李: 嘿,小李好久不见啊~ 
    小李-->>小王: 是啊
    小李->小异常: 小异常,你好啊
    小异常-->小王: 哈,小王!
    最近身体怎么样了?
    小王->>小异常: 还可以吧
    ​```
    
    title: 三个臭皮匠的故事
    participant 小王
    participant 小李
    participant 小异常
    
    note left of 小王: 我是小王
    note over 小李: 我是小李
    note right of 小异常: 大家好!
    我是小异常
    
    小王->小王: 小王想:今天要去见两个好朋友咯~
    小王->小李: 嘿,小李好久不见啊~ 
    小李-->>小王: 是啊
    小李->小异常: 小异常,你好啊
    小异常-->小王: 哈,小王!
    最近身体怎么样了?
    小王->>小异常: 还可以吧
    

    说明:

    1. 关键字
      1)title
      表示该序列图中的标题。

      2)participant
      表示该序列图中的对象。

      3)note
      表示该序列图中的部分说明。关于note以下三种关键字:

    ​ left of:表示在当前对象的左侧。

    ​ right of:表示在当前对象的右侧。

    ​ over:表示覆盖在当前对象的上方。

    1. 箭头
        1)->:实线实箭头
        2)–>:虚线实箭头
        3)->>:实线虚箭头
        4)–>>:虚线虚箭头
    2. 换行
        如果当前行中的文字过多想要换行,可以使用 进行转义换行,效果如以上例子。
    1. 流程图
    ​```flow
    sta=>start: 开始
    e=>end: 结束
    op=>operation: 操作(处理块)
    sub=>subroutine: 子程序
    cond=>condition: 是或者不是(条件判断)?
    cond2=>condition: 第二个判断(条件判断)?
    io=>inputoutput: 输出
    
    sta->op->cond
    cond(yes)->e
    cond(no)->cond2
    cond2(yes,right)->sub(left)-op
    cond2(no)->io(lef)->e
    ​```
    
    sta=>start: 开始
    e=>end: 结束
    op=>operation: 操作(处理块)
    sub=>subroutine: 子程序
    cond=>condition: 是或者不是(条件判断)?
    cond2=>condition: 第二个判断(条件判断)?
    io=>inputoutput: 输出
    
    sta->op->cond
    cond(yes)->e
    cond(no)->cond2
    cond2(yes,right)->sub(left)-op
    cond2(no)->io(lef)->e
    
    1. 关键字
      1)start, end
      表示该流程图中的开始与结束。

      2)operation
      表示该流程图中的处理块。

      3)subroutine
      表示该流程图中的子程序块。

      4)condition
      表示该流程图中的条件判断。

      5)inputoutput
      表示该流程图中的输入输出。

      6)right, left
      表示该流程图中当前模块下一个箭头的指向(默认箭头指向下方)。

      7)yes, no
      表示该流程图中条件判断的分支(默认yes箭头向下no箭头向右;yes与no可以和right同时使用;yes箭头向右时,no箭头向下)

    1. 各模块之间的联系
      1)形式:
       基本形式:

    模块标识=>模块关键字: 模块模块名称
     连接定义:

    模块标识1->模块标识2
    模块标识1->模块标识2->模块标识3
    ... ...
    

      2)说明:
      通过模块与连接定义,可以组成一个完整的流程图。
      在模块定义中,模块标识与模块名称可以自定义,模块关键字不可以自定义!

    3、注意事项
      1)在进行连接的时候,可以通过right, left确定箭头的指向;
      2)使用条件判断的连接时需要结合yes和no进行;
      3)在连接各模块之间不能有空格,在模块标识关键字时也不能有空格。

    根据网上的资料,只找到了上述两种图,可以在编写markdown时直接编辑,其他的都需要用plantuml软件进行绘制,感觉有点别扭,就不能一次性在俺的typora中实现么?绕来绕去!看到的大佬,求指点,帮俺解决这个问题。

  • 相关阅读:
    linux的一些命令
    Java中小数精确计算
    java中基本数据类型和包装类自动装箱和拆箱
    Python学习day14(内置函数二,匿名函数)
    Python学习day13(内置函数一)
    Python学习day12(生成器,列表/生成器推导式)
    Python学习day11(函数名本质,闭包及迭代器)
    Python学习day10(函数名称空间及嵌套)
    Python学习day9(函数初识)
    Python学习day8(文件操作)
  • 原文地址:https://www.cnblogs.com/damin1909/p/12945751.html
Copyright © 2011-2022 走看看