New style docs
This commit is contained in:
knsv
parent
189325508e
commit
4536930e17
Binary file not shown.
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="slate" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " d="" horiz-adv-x="512" />
|
||||
<glyph unicode="" d="M438.857 877.714q119.429 0 220.286-58.857t159.714-159.714 58.857-220.286-58.857-220.286-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857zM512 165.143v108.571q0 8-5.143 13.429t-12.571 5.429h-109.714q-7.429 0-13.143-5.714t-5.714-13.143v-108.571q0-7.429 5.714-13.143t13.143-5.714h109.714q7.429 0 12.571 5.429t5.143 13.429zM510.857 361.714l10.286 354.857q0 6.857-5.714 10.286-5.714 4.571-13.714 4.571h-125.714q-8 0-13.714-4.571-5.714-3.429-5.714-10.286l9.714-354.857q0-5.714 5.714-10t13.714-4.286h105.714q8 0 13.429 4.286t6 10z" />
|
||||
<glyph unicode="" d="M585.143 164.571v91.429q0 8-5.143 13.143t-13.143 5.143h-54.857v292.571q0 8-5.143 13.143t-13.143 5.143h-182.857q-8 0-13.143-5.143t-5.143-13.143v-91.429q0-8 5.143-13.143t13.143-5.143h54.857v-182.857h-54.857q-8 0-13.143-5.143t-5.143-13.143v-91.429q0-8 5.143-13.143t13.143-5.143h256q8 0 13.143 5.143t5.143 13.143zM512 676.571v91.429q0 8-5.143 13.143t-13.143 5.143h-109.714q-8 0-13.143-5.143t-5.143-13.143v-91.429q0-8 5.143-13.143t13.143-5.143h109.714q8 0 13.143 5.143t5.143 13.143zM877.714 438.857q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" />
|
||||
<glyph unicode="" d="M733.714 531.428q0 16-10.286 26.286l-52 51.429q-10.857 10.857-25.714 10.857t-25.714-10.857l-233.143-232.571-129.143 129.143q-10.857 10.857-25.714 10.857t-25.714-10.857l-52-51.429q-10.286-10.286-10.286-26.286 0-15.429 10.286-25.714l206.857-206.857q10.857-10.857 25.714-10.857 15.429 0 26.286 10.857l310.286 310.286q10.286 10.286 10.286 25.714zM877.714 438.857q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" />
|
||||
<glyph unicode="" d="M658.286 475.428q0 105.714-75.143 180.857t-180.857 75.143-180.857-75.143-75.143-180.857 75.143-180.857 180.857-75.143 180.857 75.143 75.143 180.857zM950.857 0q0-29.714-21.714-51.429t-51.429-21.714q-30.857 0-51.429 21.714l-196 195.429q-102.286-70.857-228-70.857-81.714 0-156.286 31.714t-128.571 85.714-85.714 128.571-31.714 156.286 31.714 156.286 85.714 128.571 128.571 85.714 156.286 31.714 156.286-31.714 128.571-85.714 85.714-128.571 31.714-156.286q0-125.714-70.857-228l196-196q21.143-21.143 21.143-51.429z" horiz-adv-x="951" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 96 B |
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
.mermaid .label{font-family:'trebuchet ms', verdana, arial;color:#333333}.node rect,.node circle,.node polygon{fill:#cde498;stroke:#13540c;stroke-width:1px}.edgePath .path{stroke:green;stroke-width:1.5px}.cluster rect{fill:#cdffb2 !important;rx:4 !important;stroke:#6eaa49 !important;stroke-width:1px !important}.cluster text{fill:#333333}.actor{stroke:#13540c;fill:#cde498}text.actor{fill:black;stroke:none}.actor-line{stroke:grey}.messageLine0{stroke-width:1.5;stroke-dasharray:"2 2";marker-end:"url(#arrowhead)";stroke:#333333}.messageLine1{stroke-width:1.5;stroke-dasharray:"2 2";stroke:#333333}#arrowhead{fill:#333333}#crosshead path{fill:#333333 !important;stroke:#333333 !important}.messageText{fill:#333333;stroke:none}.labelBox{stroke:#326932;fill:#cde498}.labelText{fill:black;stroke:none}.loopText{fill:black;stroke:none}.loopLine{stroke-width:2;stroke-dasharray:"2 2";marker-end:"url(#arrowhead)";stroke:#326932}.note{stroke:#6eaa49;fill:#fff5ad}.noteText{fill:black;stroke:none;font-family:'trebuchet ms', verdana, arial;font-size:14px}.section{stroke:none;opacity:0.2}.section0{fill:#6eaa49}.section2{fill:#6eaa49}.section1,.section3{fill:white;opacity:0.2}.sectionTitle0{fill:#333333}.sectionTitle1{fill:#333333}.sectionTitle2{fill:#333333}.sectionTitle3{fill:#333333}.sectionTitle{text-anchor:start;font-size:11px;text-height:14px}.grid .tick{stroke:lightgrey;opacity:0.3;shape-rendering:crispEdges}.grid path{stroke-width:0}.today{fill:none;stroke:red;stroke-width:2px}.task{stroke-width:2}.taskText{text-anchor:middle;font-size:11px}.taskTextOutsideRight{fill:black;text-anchor:start;font-size:11px}.taskTextOutsideLeft{fill:black;text-anchor:end;font-size:11px}.taskText0,.taskText1,.taskText2,.taskText3{fill:white}.task0,.task1,.task2,.task3{fill:#487e3a;stroke:#13540c}.taskTextOutside0,.taskTextOutside2{fill:black}.taskTextOutside1,.taskTextOutside3{fill:black}.active0,.active1,.active2,.active3{fill:#cde498;stroke:#13540c}.activeText0,.activeText1,.activeText2,.activeText3{fill:black !important}.done0,.done1,.done2,.done3{stroke:grey;fill:lightgrey;stroke-width:2}.doneText0,.doneText1,.doneText2,.doneText3{fill:black !important}.crit0,.crit1,.crit2,.crit3{stroke:#ff8888;fill:red;stroke-width:2}.activeCrit0,.activeCrit1,.activeCrit2,.activeCrit3{stroke:#ff8888;fill:#cde498;stroke-width:2}.doneCrit0,.doneCrit1,.doneCrit2,.doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}.doneCritText0,.doneCritText1,.doneCritText2,.doneCritText3{fill:black !important}.activeCritText0,.activeCritText1,.activeCritText2,.activeCritText3{fill:black !important}.titleText{text-anchor:middle;font-size:18px;fill:black}text{font-family:'trebuchet ms', verdana, arial;font-size:14px}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
/*
|
||||
Five-color theme from a single blue hue.
|
||||
*/
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: #eaeef3;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
.hljs,
|
||||
.hljs-list .hljs-built_in {
|
||||
color: #00193a;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-title,
|
||||
.hljs-important,
|
||||
.hljs-request,
|
||||
.hljs-header,
|
||||
.hljs-javadoctag {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-chunk {
|
||||
color: #738191;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-title,
|
||||
.hljs-parent,
|
||||
.hljs-built_in,
|
||||
.hljs-literal,
|
||||
.hljs-filename,
|
||||
.hljs-value,
|
||||
.hljs-addition,
|
||||
.hljs-tag,
|
||||
.hljs-argument,
|
||||
.hljs-link_label,
|
||||
.hljs-blockquote,
|
||||
.hljs-header {
|
||||
color: #0048ab;
|
||||
}
|
||||
|
||||
.hljs-decorator,
|
||||
.hljs-prompt,
|
||||
.hljs-yardoctag,
|
||||
.hljs-subst,
|
||||
.hljs-symbol,
|
||||
.hljs-doctype,
|
||||
.hljs-regexp,
|
||||
.hljs-preprocessor,
|
||||
.hljs-pragma,
|
||||
.hljs-pi,
|
||||
.hljs-attribute,
|
||||
.hljs-attr_selector,
|
||||
.hljs-javadoc,
|
||||
.hljs-xmlDocTag,
|
||||
.hljs-deletion,
|
||||
.hljs-shebang,
|
||||
.hljs-string .hljs-variable,
|
||||
.hljs-link_url,
|
||||
.hljs-bullet,
|
||||
.hljs-sqbracket,
|
||||
.hljs-phony {
|
||||
color: #4c81c9;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.content h1,.content h2,.content h3,.content h4,body{font-family:"Helvetica Neue", Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;font-size:13px}.content h1,.content h2,.content h3,.content h4{font-weight:bold}.content pre,.content code{font-family:Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;font-size:12px;line-height:1.5}.content pre,.content code{word-break:break-all;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}@font-face{font-family:'slate';src:url("../fonts/slate.eot?-syv14m");src:url("../fonts/slate.eot?#iefix-syv14m") format("embedded-opentype"),url("../fonts/slate.woff2?-syv14m") format("woff2"),url("../fonts/slate.woff?-syv14m") format("woff"),url("../fonts/slate.ttf?-syv14m") format("truetype"),url("../fonts/slate.svg?-syv14m#slate") format("svg");font-weight:normal;font-style:normal}.content aside.warning:before,.content aside.notice:before,.content aside.success:before{font-family:'slate';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1}.content aside.warning:before{content:"\e600"}.content aside.notice:before{content:"\e602"}.content aside.success:before{content:"\e606"}.tocify,.toc-footer,.lang-selector,.search,#nav-button{display:none}.tocify-wrapper>img{margin:0 auto;display:block}.content{font-size:12px}.content pre,.content code{border:1px solid #999;border-radius:5px;font-size:0.8em}.content pre{padding:1.3em}.content code{padding:0.2em}.content table{border:1px solid #999}.content table tr{border-bottom:1px solid #999}.content table td,.content table th{padding:0.7em}.content p{line-height:1.5}.content a{text-decoration:none;color:#000}.content h1{font-size:2.5em;padding-top:0.5em;padding-bottom:0.5em;margin-top:1em;margin-bottom:21px;border:2px solid #ccc;border-width:2px 0;text-align:center}.content h2{font-size:1.8em;margin-top:2em;border-top:2px solid #ccc;padding-top:0.8em}.content h1+h2,.content h1+div+h2{border-top:none;padding-top:0;margin-top:0}.content h3,.content h4{font-size:0.8em;margin-top:1.5em;margin-bottom:0.8em;text-transform:uppercase}.content h5,.content h6{text-transform:uppercase}.content aside{padding:1em;border:1px solid #ccc;border-radius:5px;margin-top:1.5em;margin-bottom:1.5em;line-height:1.6}.content aside:before{vertical-align:middle;padding-right:0.5em;font-size:14px}
|
||||
|
|
@ -0,0 +1,913 @@
|
|||
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
|
||||
display: block
|
||||
}
|
||||
|
||||
audio, canvas, progress, video {
|
||||
display: inline-block;
|
||||
vertical-align: baseline
|
||||
}
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0
|
||||
}
|
||||
|
||||
[hidden], template {
|
||||
display: none
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent
|
||||
}
|
||||
|
||||
a:active, a:hover {
|
||||
outline: 0
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0
|
||||
}
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%
|
||||
}
|
||||
|
||||
sub, sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 1em 40px
|
||||
}
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
code, kbd, pre, samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em
|
||||
}
|
||||
|
||||
button, input, optgroup, select, textarea {
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
button {
|
||||
overflow: visible
|
||||
}
|
||||
|
||||
button, select {
|
||||
text-transform: none
|
||||
}
|
||||
|
||||
button, html input[type="button"], input[type="reset"], input[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
button[disabled], html input[disabled] {
|
||||
cursor: default
|
||||
}
|
||||
|
||||
button::-moz-focus-inner, input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
input {
|
||||
line-height: normal
|
||||
}
|
||||
|
||||
input[type="checkbox"], input[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
box-sizing: content-box
|
||||
}
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em
|
||||
}
|
||||
|
||||
legend {
|
||||
border: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
optgroup {
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6, html, body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif;
|
||||
font-size: 13px
|
||||
}
|
||||
|
||||
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.content code, .content pre {
|
||||
font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
|
||||
font-size: 12px;
|
||||
line-height: 1.5
|
||||
|
||||
|
||||
}
|
||||
|
||||
.content code {
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto
|
||||
|
||||
}
|
||||
|
||||
.highlight table td {
|
||||
padding: 5px
|
||||
}
|
||||
|
||||
.highlight table pre {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.highlight, .highlight .w {
|
||||
color: #f8f8f2;
|
||||
background-color: #272822
|
||||
}
|
||||
|
||||
.highlight .err {
|
||||
color: #151515;
|
||||
background-color: #ac4142
|
||||
}
|
||||
|
||||
.highlight .c, .highlight .cd, .highlight .cm, .highlight .c1, .highlight .cs {
|
||||
color: #505050
|
||||
}
|
||||
|
||||
.highlight .cp {
|
||||
color: #f4bf75
|
||||
}
|
||||
|
||||
.highlight .nt {
|
||||
color: #f4bf75
|
||||
}
|
||||
|
||||
.highlight .o, .highlight .ow {
|
||||
color: #d0d0d0
|
||||
}
|
||||
|
||||
.highlight .p, .highlight .pi {
|
||||
color: #d0d0d0
|
||||
}
|
||||
|
||||
.highlight .gi {
|
||||
color: #90a959
|
||||
}
|
||||
|
||||
.highlight .gd {
|
||||
color: #ac4142
|
||||
}
|
||||
|
||||
.highlight .gh {
|
||||
color: #6a9fb5;
|
||||
background-color: #151515;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
|
||||
color: #aa759f
|
||||
}
|
||||
|
||||
.highlight .kc {
|
||||
color: #d28445
|
||||
}
|
||||
|
||||
.highlight .kt {
|
||||
color: #d28445
|
||||
}
|
||||
|
||||
.highlight .kd {
|
||||
color: #d28445
|
||||
}
|
||||
|
||||
.highlight .s, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
|
||||
color: #90a959
|
||||
}
|
||||
|
||||
.highlight .sr {
|
||||
color: #75b5aa
|
||||
}
|
||||
|
||||
.highlight .si {
|
||||
color: #8f5536
|
||||
}
|
||||
|
||||
.highlight .se {
|
||||
color: #8f5536
|
||||
}
|
||||
|
||||
.highlight .nn {
|
||||
color: #f4bf75
|
||||
}
|
||||
|
||||
.highlight .nc {
|
||||
color: #f4bf75
|
||||
}
|
||||
|
||||
.highlight .no {
|
||||
color: #f4bf75
|
||||
}
|
||||
|
||||
.highlight .na {
|
||||
color: #6a9fb5
|
||||
}
|
||||
|
||||
.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mb, .highlight .mx {
|
||||
color: #90a959
|
||||
}
|
||||
|
||||
.highlight .ss {
|
||||
color: #90a959
|
||||
}
|
||||
|
||||
.highlight .c, .highlight .cm, .highlight .c1, .highlight .cs {
|
||||
color: #909090
|
||||
}
|
||||
|
||||
.highlight, .highlight .w {
|
||||
background-color: #292929
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'slate';
|
||||
src: url("../fonts/slate.eot?-syv14m");
|
||||
src: url("../fonts/slate.eot?#iefix-syv14m") format("embedded-opentype"), url("../fonts/slate.woff2?-syv14m") format("woff2"), url("../fonts/slate.woff?-syv14m") format("woff"), url("../fonts/slate.ttf?-syv14m") format("truetype"), url("../fonts/slate.svg?-syv14m#slate") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal
|
||||
}
|
||||
|
||||
.content aside.warning:before, .content aside.notice:before, .content aside.success:before, .tocify-wrapper > .search:before {
|
||||
font-family: 'slate';
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1
|
||||
}
|
||||
|
||||
.content aside.warning:before {
|
||||
content: "\e600"
|
||||
}
|
||||
|
||||
.content aside.notice:before {
|
||||
content: "\e602"
|
||||
}
|
||||
|
||||
.content aside.success:before {
|
||||
content: "\e606"
|
||||
}
|
||||
|
||||
.tocify-wrapper > .search:before {
|
||||
content: "\e607"
|
||||
}
|
||||
|
||||
html, body {
|
||||
color: #333;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-color: #ffffff;
|
||||
height: 100%;
|
||||
-webkit-text-size-adjust: none
|
||||
}
|
||||
|
||||
#toc > ul > li > a > span {
|
||||
float: right;
|
||||
background-color: #2484FF;
|
||||
border-radius: 40px;
|
||||
width: 20px
|
||||
}
|
||||
|
||||
.tocify-wrapper {
|
||||
transition: left 0.3s ease-in-out;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
position: fixed;
|
||||
z-index: 30;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 230px;
|
||||
background-color: #525151;
|
||||
font-size: 13px;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.tocify-wrapper .lang-selector {
|
||||
display: none
|
||||
}
|
||||
|
||||
.tocify-wrapper .lang-selector a {
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em
|
||||
}
|
||||
|
||||
.tocify-wrapper > img {
|
||||
display: block
|
||||
}
|
||||
|
||||
.tocify-wrapper > .search {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.tocify-wrapper > .search input {
|
||||
background: #393939;
|
||||
border-width: 0 0 1px 0;
|
||||
border-color: #666;
|
||||
padding: 6px 0 6px 20px;
|
||||
box-sizing: border-box;
|
||||
margin: 10px 15px;
|
||||
width: 200px;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
border-radius: 0
|
||||
}
|
||||
|
||||
.tocify-wrapper > .search:before {
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
left: 15px;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.tocify-wrapper img + .tocify {
|
||||
margin-top: 20px
|
||||
}
|
||||
|
||||
.tocify-wrapper .search-results {
|
||||
margin-top: 0;
|
||||
box-sizing: border-box;
|
||||
height: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
transition-property: height, margin;
|
||||
transition-duration: 180ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 8px), linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent 8px), linear-gradient(to bottom, #000, transparent 1.5px), linear-gradient(to top, #939393, rgba(147, 147, 147, 0) 1.5px), #262626
|
||||
}
|
||||
|
||||
.tocify-wrapper .search-results.visible {
|
||||
height: 30%;
|
||||
margin-bottom: 1em
|
||||
}
|
||||
|
||||
.tocify-wrapper .search-results li {
|
||||
margin: 1em 15px;
|
||||
line-height: 1
|
||||
}
|
||||
|
||||
.tocify-wrapper .search-results a {
|
||||
color: #fff;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.tocify-wrapper .search-results a:hover {
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
.tocify-wrapper .tocify-item > a, .tocify-wrapper .toc-footer li {
|
||||
padding: 0 15px 0 15px;
|
||||
display: block;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis
|
||||
}
|
||||
|
||||
.tocify-wrapper ul, .tocify-wrapper li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 28px
|
||||
}
|
||||
|
||||
.tocify-wrapper li {
|
||||
color: #fff;
|
||||
transition-property: background;
|
||||
transition-timing-function: linear;
|
||||
transition-duration: 230ms
|
||||
}
|
||||
|
||||
.tocify-wrapper .tocify-focus {
|
||||
box-shadow: 0px 1px 0px #000;
|
||||
background-color: #2467af;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.tocify-wrapper .tocify-subheader {
|
||||
display: none;
|
||||
background-color: #262626;
|
||||
font-weight: 500;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 8px), linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent 8px), linear-gradient(to bottom, #000, transparent 1.5px), linear-gradient(to top, #939393, rgba(147, 147, 147, 0) 1.5px), #262626
|
||||
}
|
||||
|
||||
.tocify-wrapper .tocify-subheader .tocify-item > a {
|
||||
padding-left: 25px;
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
.tocify-wrapper .tocify-subheader > li:last-child {
|
||||
box-shadow: none
|
||||
}
|
||||
|
||||
.tocify-wrapper .toc-footer {
|
||||
padding: 1em 0;
|
||||
margin-top: 1em;
|
||||
border-top: 1px dashed #666
|
||||
}
|
||||
|
||||
.tocify-wrapper .toc-footer li, .tocify-wrapper .toc-footer a {
|
||||
color: #fff;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.tocify-wrapper .toc-footer a:hover {
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
.tocify-wrapper .toc-footer li {
|
||||
font-size: 0.8em;
|
||||
line-height: 1.7;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
#nav-button {
|
||||
padding: 0 1.5em 5em 0;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
opacity: 0.7;
|
||||
line-height: 16px;
|
||||
transition: left 0.3s ease-in-out
|
||||
}
|
||||
|
||||
#nav-button span {
|
||||
display: block;
|
||||
padding: 6px 6px 6px;
|
||||
background-color: rgba(234, 242, 246, 0.7);
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: rotate(-90deg) translate(-100%, 0);
|
||||
transform: rotate(-90deg) translate(-100%, 0);
|
||||
border-radius: 0 0 0 5px
|
||||
}
|
||||
|
||||
#nav-button img {
|
||||
height: 16px;
|
||||
vertical-align: bottom
|
||||
}
|
||||
|
||||
#nav-button:hover {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
#nav-button.open {
|
||||
left: 230px
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
margin-left: 230px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background-color: #eaf2f6;
|
||||
min-height: 100%;
|
||||
padding-bottom: 1px
|
||||
}
|
||||
|
||||
.page-wrapper .dark-box {
|
||||
width: 50%;
|
||||
background-color: #393939;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0
|
||||
}
|
||||
|
||||
.page-wrapper .lang-selector {
|
||||
position: fixed;
|
||||
z-index: 50;
|
||||
border-bottom: 5px solid #393939
|
||||
}
|
||||
|
||||
.lang-selector {
|
||||
background-color: #222;
|
||||
width: 100%;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.lang-selector a {
|
||||
display: block;
|
||||
float: left;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 0 10px;
|
||||
line-height: 30px;
|
||||
outline: 0
|
||||
}
|
||||
|
||||
.lang-selector a:active, .lang-selector a:focus {
|
||||
background-color: #111;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.lang-selector a.active {
|
||||
background-color: #393939;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.lang-selector:after {
|
||||
content: '';
|
||||
clear: both;
|
||||
display: block
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 30
|
||||
}
|
||||
|
||||
.content:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.content > h1, .content > h2, .content > h3, .content > h4, .content > h5, .content > h6, .content > p, .content > table, .content > ul, .content > ol, .content > aside, .content > dl {
|
||||
margin-right: 50%;
|
||||
padding: 0 28px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
text-shadow: 0px 1px 0px #fff
|
||||
}
|
||||
|
||||
.content > ul, .content > ol {
|
||||
padding-left: 43px
|
||||
}
|
||||
|
||||
.content > h1, .content > h2, .content > div {
|
||||
clear: both
|
||||
}
|
||||
|
||||
.content h1 {
|
||||
font-size: 30px;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin-bottom: 21px;
|
||||
margin-top: 2em;
|
||||
border-top: 1px solid #ddd;
|
||||
background-image: linear-gradient(to bottom, #fff, #f9f9f9)
|
||||
}
|
||||
|
||||
.content h1:first-child, .content div:first-child + h1 {
|
||||
border-top-width: 0;
|
||||
margin-top: 0
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
font-size: 20px;
|
||||
margin-top: 4em;
|
||||
margin-bottom: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
padding-top: 1.2em;
|
||||
padding-bottom: 1.2em;
|
||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0))
|
||||
}
|
||||
|
||||
.content h1 + h2, .content h1 + div + h2 {
|
||||
margin-top: -21px;
|
||||
border-top: none
|
||||
}
|
||||
|
||||
.content h3, .content h4, .content h5, .content h6 {
|
||||
font-size: 15px;
|
||||
margin-top: 2.5em;
|
||||
margin-bottom: 0.8em
|
||||
}
|
||||
|
||||
.content h4, .content h5, .content h6 {
|
||||
font-size: 10px
|
||||
}
|
||||
|
||||
.content hr {
|
||||
margin: 2em 0;
|
||||
border-top: 2px solid #393939;
|
||||
border-bottom: 2px solid #eaf2f6
|
||||
}
|
||||
|
||||
.content table {
|
||||
margin-bottom: 1em;
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
.content table th, .content table td {
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
line-height: 1.6
|
||||
}
|
||||
|
||||
.content table th {
|
||||
padding: 5px 10px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
vertical-align: bottom
|
||||
}
|
||||
|
||||
.content table td {
|
||||
padding: 10px
|
||||
}
|
||||
|
||||
.content table tr:last-child {
|
||||
border-bottom: 1px solid #ccc
|
||||
}
|
||||
|
||||
.content table tr:nth-child(odd) > td {
|
||||
background-color: #f9fbfc
|
||||
}
|
||||
|
||||
.content table tr:nth-child(even) > td {
|
||||
background-color: #f3f7fa
|
||||
}
|
||||
|
||||
.content dt {
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.content dd {
|
||||
margin-left: 15px
|
||||
}
|
||||
|
||||
.content p, .content li, .content dt, .content dd {
|
||||
line-height: 1.6;
|
||||
margin-top: 0
|
||||
}
|
||||
|
||||
.content img {
|
||||
max-width: 100%
|
||||
}
|
||||
|
||||
.content code {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
padding: 3px;
|
||||
border-radius: 3px
|
||||
}
|
||||
|
||||
.content pre > code {
|
||||
background-color: transparent;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.content aside {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
text-shadow: 0 1px 0 #c6dde9;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
background: #8fbcd4;
|
||||
line-height: 1.6
|
||||
}
|
||||
|
||||
.content aside.warning {
|
||||
background-color: #c97a7e;
|
||||
text-shadow: 0 1px 0 #dfb0b3
|
||||
}
|
||||
|
||||
.content aside.success {
|
||||
background-color: #6ac174;
|
||||
text-shadow: 0 1px 0 #a0d7a6
|
||||
}
|
||||
|
||||
.content aside:before {
|
||||
vertical-align: middle;
|
||||
padding-right: 0.5em;
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
.content .search-highlight {
|
||||
padding: 2px;
|
||||
margin: -2px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #F7E633;
|
||||
text-shadow: 1px 1px 0 #666;
|
||||
background: linear-gradient(to top left, #f7e633 0%, #f1d32f 100%)
|
||||
}
|
||||
|
||||
.content pre, .content blockquote {
|
||||
/*background-color: #292929;*/
|
||||
background-color: #FBF8EF;
|
||||
color: #fff;
|
||||
padding: 2em 28px;
|
||||
margin: 0;
|
||||
width: 50%;
|
||||
float: right;
|
||||
clear: right;
|
||||
box-sizing: border-box;
|
||||
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4)
|
||||
}
|
||||
|
||||
.content pre > p, .content blockquote > p {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.content pre a, .content blockquote a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border-bottom: dashed 1px #ccc
|
||||
}
|
||||
|
||||
.content blockquote > p {
|
||||
background-color: #eee;
|
||||
border-radius: 0px;
|
||||
padding: 13px;
|
||||
color: #000;
|
||||
border-left: 4px solid #f0ad4e;
|
||||
/*background-color: #eee;*/
|
||||
/*border-radius: 5px;*/
|
||||
/*padding: 13px;*/
|
||||
/*color: #ccc;*/
|
||||
/*border-top: 1px solid #000;*/
|
||||
/*border-bottom: 1px solid #404040*/
|
||||
}
|
||||
|
||||
@media (max-width: 930px) {
|
||||
.tocify-wrapper {
|
||||
left: -230px
|
||||
}
|
||||
|
||||
.tocify-wrapper.open {
|
||||
left: 0
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
#nav-button {
|
||||
display: block
|
||||
}
|
||||
|
||||
.tocify-wrapper .tocify-item > a {
|
||||
padding-top: 0.3em;
|
||||
padding-bottom: 0.3em
|
||||
}
|
||||
}
|
||||
|
||||
/*@media (max-width: 700px) {*/
|
||||
.dark-box {
|
||||
display: none
|
||||
}
|
||||
|
||||
.content > h1, .content > h2, .content > h3, .content > h4, .content > h5, .content > h6, .content > p, .content > table, .content > ul, .content > ol, .content > aside, .content > dl {
|
||||
margin-right: 0
|
||||
}
|
||||
|
||||
.tocify-wrapper .lang-selector {
|
||||
display: block
|
||||
}
|
||||
|
||||
.page-wrapper .lang-selector {
|
||||
display: none
|
||||
}
|
||||
|
||||
.content pre, .content blockquote {
|
||||
width: auto;
|
||||
float: none
|
||||
}
|
||||
|
||||
.content > pre + h1, .content > blockquote + h1, .content > pre + h2, .content > blockquote + h2, .content > pre + h3, .content > blockquote + h3, .content > pre + h4, .content > blockquote + h4, .content > pre + h5, .content > blockquote + h5, .content > pre + h6, .content > blockquote + h6, .content > pre + p, .content > blockquote + p, .content > pre + table, .content > blockquote + table, .content > pre + ul, .content > blockquote + ul, .content > pre + ol, .content > blockquote + ol, .content > pre + aside, .content > blockquote + aside, .content > pre + dl, .content > blockquote + dl {
|
||||
margin-top: 28px
|
||||
}
|
||||
/*}*/
|
||||
|
||||
.content code, .content pre {
|
||||
font-size: 12px;
|
||||
/*-webkit-box-shadow: 0 0 0 3px #eee;*/
|
||||
/*box-shadow: 0 0 0 3px #eee;*/
|
||||
overflow: auto !important;
|
||||
margin-bottom: 0;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
color: #4d4d4c;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.content pre {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.content pre {
|
||||
-webkit-box-shadow: 0 0 0 3px #eee;
|
||||
box-shadow: 0 0 0 3px #eee;
|
||||
width:900px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
background: #FBF8EF;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: #FFF;
|
||||
}
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
/*
|
||||
|
||||
Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
|
||||
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: #fdf6e3;
|
||||
color: #657b83;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.diff .hljs-header,
|
||||
.hljs-doctype,
|
||||
.hljs-pi,
|
||||
.lisp .hljs-string {
|
||||
color: #93a1a1;
|
||||
}
|
||||
|
||||
/* Solarized Green */
|
||||
.hljs-keyword,
|
||||
.hljs-winutils,
|
||||
.method,
|
||||
.hljs-addition,
|
||||
.css .hljs-tag,
|
||||
.hljs-request,
|
||||
.hljs-status,
|
||||
.nginx .hljs-title {
|
||||
color: #859900;
|
||||
}
|
||||
|
||||
/* Solarized Cyan */
|
||||
.hljs-number,
|
||||
.hljs-command,
|
||||
.hljs-string,
|
||||
.hljs-tag .hljs-value,
|
||||
.hljs-rule .hljs-value,
|
||||
.hljs-doctag,
|
||||
.tex .hljs-formula,
|
||||
.hljs-regexp,
|
||||
.hljs-hexcolor,
|
||||
.hljs-link_url {
|
||||
color: #2aa198;
|
||||
}
|
||||
|
||||
/* Solarized Blue */
|
||||
.hljs-title,
|
||||
.hljs-localvars,
|
||||
.hljs-chunk,
|
||||
.hljs-decorator,
|
||||
.hljs-built_in,
|
||||
.hljs-identifier,
|
||||
.vhdl .hljs-literal,
|
||||
.hljs-id,
|
||||
.css .hljs-function,
|
||||
.hljs-name {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
/* Solarized Yellow */
|
||||
.hljs-attribute,
|
||||
.hljs-variable,
|
||||
.lisp .hljs-body,
|
||||
.smalltalk .hljs-number,
|
||||
.hljs-constant,
|
||||
.hljs-class .hljs-title,
|
||||
.hljs-parent,
|
||||
.hljs-type,
|
||||
.hljs-link_reference {
|
||||
color: #b58900;
|
||||
}
|
||||
|
||||
/* Solarized Orange */
|
||||
.hljs-preprocessor,
|
||||
.hljs-preprocessor .hljs-keyword,
|
||||
.hljs-pragma,
|
||||
.hljs-shebang,
|
||||
.hljs-symbol,
|
||||
.hljs-symbol .hljs-string,
|
||||
.diff .hljs-change,
|
||||
.hljs-special,
|
||||
.hljs-attr_selector,
|
||||
.hljs-subst,
|
||||
.hljs-cdata,
|
||||
.css .hljs-pseudo,
|
||||
.hljs-header {
|
||||
color: #cb4b16;
|
||||
}
|
||||
|
||||
/* Solarized Red */
|
||||
.hljs-deletion,
|
||||
.hljs-important {
|
||||
color: #dc322f;
|
||||
}
|
||||
|
||||
/* Solarized Violet */
|
||||
.hljs-link_label {
|
||||
color: #6c71c4;
|
||||
}
|
||||
|
||||
.tex .hljs-formula {
|
||||
background: #eee8d5;
|
||||
}
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
---
|
||||
title: Demos
|
||||
order: 5
|
||||
---
|
||||
# Demos
|
||||
## Basic flowchart
|
||||
```
|
||||
|
|
@ -1,4 +1,9 @@
|
|||
# Development: Updating the documentation
|
||||
---
|
||||
order: 9
|
||||
---
|
||||
# Development
|
||||
|
||||
##Updating the documentation
|
||||
|
||||
## Getting the development environment up
|
||||
1. Fork the gh-pages branch in the the mermaid repository
|
||||
|
|
@ -20,9 +25,9 @@ when the site is re-generated.
|
|||
|
||||
Do a pull request to merge the changes to the site.
|
||||
|
||||
# Things to be done in order to add a new diagram type
|
||||
## Step 1: Grammar & Parsing
|
||||
### Grammar
|
||||
## Things to be done in order to add a new diagram type
|
||||
### Step 1: Grammar & Parsing
|
||||
#### Grammar
|
||||
This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
|
||||
|
||||
For instance:
|
||||
|
|
@ -30,7 +35,7 @@ For instance:
|
|||
* the flowchart starts with the keyword graph.
|
||||
* the sequence diagram starts with the keyword sequenceDiagram
|
||||
|
||||
### Store data found during parsing
|
||||
#### Store data found during parsing
|
||||
There are some jison specific sub steps here where the parser stores the data encountered when parsing the diagram, this data is later used by the renderer. You can during the parsing call a object provided to the parser by the user of the parser. This object can be called during parsing for storing data.
|
||||
|
||||
```
|
||||
|
|
@ -62,33 +67,33 @@ when parsing the yy object is initialized as per below:
|
|||
parser.yy = db;
|
||||
```
|
||||
|
||||
## Step 2: Rendering
|
||||
### Step 2: Rendering
|
||||
Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequendeRenderer.js rather then the flowchart renderer as this is a more generic example.
|
||||
|
||||
Place the renderer in the diagram folder.
|
||||
|
||||
## Step 3: Detection of the new diagram type
|
||||
### Step 3: Detection of the new diagram type
|
||||
The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
|
||||
|
||||
## Step 4: The final piece - triggering the rendering
|
||||
### Step 4: The final piece - triggering the rendering
|
||||
At this point when mermaid is trying to render the diagram, it will detect it as being of the new type but there will be no match when trying to render the diagram. To fix this add a new case in the switch statement in main.js:init this should match the diagram type returned from step number 2. The code in this new case statement should call the renderer for the diagram type with the data found by the parser as an argument.
|
||||
|
||||
# Usage of the parser as a separate module
|
||||
## Usage of the parser as a separate module
|
||||
|
||||
## Setup
|
||||
### Setup
|
||||
```
|
||||
var graph = require('./graphDb');
|
||||
var flow = require('./parser/flow');
|
||||
flow.parser.yy = graph;
|
||||
```
|
||||
|
||||
## Parsing
|
||||
### Parsing
|
||||
|
||||
```
|
||||
flow.parser.parse(text);
|
||||
```
|
||||
|
||||
## Data extraction
|
||||
### Data extraction
|
||||
|
||||
```
|
||||
// Javascript example
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
---
|
||||
order: 3
|
||||
---
|
||||
|
||||
#Flowcharts - Basic Syntax
|
||||
## Graph
|
||||
This statement declares a new graph and the direction of the graph layout.
|
||||
|
|
@ -308,16 +312,3 @@ graph LR
|
|||
C -->|One| D[Result one]
|
||||
C -->|Two| E[Result two]
|
||||
```
|
||||
## Configuration...
|
||||
|
||||
Is it possible to adjust the width of the rendered flowchart.
|
||||
|
||||
This is done by defining **mermaid.flowchartConfig** or by the CLI to use a json file with the configuration. How to use
|
||||
the CLI is described in the mermaidCLI page.
|
||||
mermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object.
|
||||
|
||||
```
|
||||
mermaid.flowchartConfig = {
|
||||
width:100%;
|
||||
};
|
||||
```
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
---
|
||||
order: 4
|
||||
---
|
||||
|
||||
# Gant diagrams
|
||||
|
||||
> A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule. Gantt charts illustrate the start and finish dates of the terminal elements and summary elements of a project.
|
||||
|
|
@ -30,7 +34,7 @@ gantt
|
|||
anther task : 24d
|
||||
```
|
||||
|
||||
# Syntax
|
||||
## Syntax
|
||||
```
|
||||
%% Example with slection of syntaxes
|
||||
gantt
|
||||
|
|
@ -192,7 +196,7 @@ noteText | Styles for the text on in the note boxes.
|
|||
### Sample stylesheet
|
||||
|
||||
|
||||
```
|
||||
```css
|
||||
|
||||
.grid .tick {
|
||||
stroke: lightgrey;
|
||||
|
|
@ -247,23 +251,5 @@ noteText | Styles for the text on in the note boxes.
|
|||
|
||||
Is it possible to adjust the margins for rendering the sequence diagram.
|
||||
|
||||
This is done by defining **mermaid.sequenceConfig** or by the CLI to use a json file with the configuration. How to use
|
||||
the CLI is described in the mermaidCLI page.
|
||||
mermaid.sequenceConfig can be set to a JSON string with config parameters or the corresponding object.
|
||||
|
||||
```
|
||||
mermaid.ganttConfig = {
|
||||
titleTopMargin:25,
|
||||
barHeight:20,
|
||||
barGap:4,
|
||||
topPadding:75,
|
||||
sidePadding:75
|
||||
};
|
||||
```
|
||||
|
||||
### Possible configration params:
|
||||
|
||||
Param | Descriotion | Default value
|
||||
--- | --- | ---
|
||||
mirrorActor|Turns on/off the rendering of actors below the diagram as well as above it|false
|
||||
bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with css could generate unwantewd clipping which is why this config param exists.|1
|
||||
This is done by defining the **sequenceConfig** part of the configuration object. Read more about it [here](http://knsv.github.io/mermaid/index.html#configuration28). How to use
|
||||
the CLI is described in the [mermaidCLI]((http://knsv.github.io/mermaid/index.html#mermaidCLI) page.
|
||||
|
|
@ -1,8 +1,12 @@
|
|||
---
|
||||
order: 0
|
||||
---
|
||||
|
||||
mermaid
|
||||
=======
|
||||
|
||||
|
||||
|
||||
Generation of diagrams and flowcharts from text in a similar manner as markdown.
|
||||
>Generation of diagrams and flowcharts from text in a similar manner as markdown.
|
||||
|
||||
Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?
|
||||
|
||||
|
|
@ -10,9 +14,10 @@ Ever wanted to simplify documentation and avoid heavy tools like Visio when expl
|
|||
This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript. [Try it using our editor](http://knsv.github.io/mermaid/live_editor).
|
||||
|
||||
|
||||
Code examples below:
|
||||
Code examples below:
|
||||
|
||||
###An example of a flowchart
|
||||
```
|
||||
%% An example of a flowchart
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
|
|
@ -20,8 +25,8 @@ graph TD;
|
|||
C-->D;
|
||||
```
|
||||
|
||||
###An example of a sequence diagram
|
||||
```
|
||||
%% An example of a sequence diagram
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
|
|
@ -35,10 +40,9 @@ sequenceDiagram
|
|||
Bob-->John: Jolly good!
|
||||
```
|
||||
|
||||
|
||||
###Example code for a gantt diagram
|
||||
```
|
||||
%% Example of a Gannt diagram
|
||||
gantt
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram functionality to mermaid
|
||||
section A section
|
||||
|
|
@ -55,18 +59,18 @@ sequenceDiagram
|
|||
Add to mermaid :1d
|
||||
```
|
||||
|
||||
Play with mermaid using this [editor](http://danielmschmidt.github.io/mermaid-demo/) or this [live editor](live_editor). You can also look at mermaid in action using [jsbin](http://jsbin.com/faxunexeku/1/edit?html,output).
|
||||
Play with mermaid using this [editor](http://danielmschmidt.github.io/mermaid-demo/) or this [live editor](live_editor).
|
||||
|
||||
## Further reading
|
||||
|
||||
* [Usage](http://knsv.github.io/mermaid/usage.html)
|
||||
* [Flowchart syntax](http://knsv.github.io/mermaid/flowchart.html)
|
||||
* [Sequence diagram syntax](http://knsv.github.io/mermaid/sequenceDiagram.html)
|
||||
* [Gantt chart syntax](http://knsv.github.io/mermaid/gantt.html)
|
||||
* [Mermaid client](http://knsv.github.io/mermaid/mermaidCLI.html)
|
||||
* [Usage](http://knsv.github.io/mermaid/index.html#usage)
|
||||
* [Flowchart syntax](http://knsv.github.io/mermaid/index.html#flowcharts-basic-syntax)
|
||||
* [Sequence diagram syntax](http://knsv.github.io/mermaid/index.html#sequence-diagrams)
|
||||
* [Gantt chart syntax](http://knsv.github.io/mermaid/index.html#gant-diagrams)
|
||||
* [Mermaid client](http://knsv.github.io/mermaid/index.html#flowcharts-basic-syntax)
|
||||
* [Editor](http://knsv.github.io/mermaid/live_editor)
|
||||
|
||||
# Credits
|
||||
## Credits
|
||||
Many thanks to the [d3](http://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing
|
||||
the graphical layout and drawing libraries! Thanks also to the
|
||||
[js-sequence-diagram](http://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
---
|
||||
order: 4
|
||||
---
|
||||
|
||||
# mermaid CLI
|
||||
|
||||
Installing mermaid globally (`npm install -g mermaid`) will expose the `mermaid` command to your environment, allowing you to generate PNGs from any file containing mermaid markup via the command line.
|
||||
|
|
@ -22,7 +22,7 @@ sequenceDiagram
|
|||
John-->>Alice: Great!
|
||||
```
|
||||
|
||||
# Syntax
|
||||
## Syntax
|
||||
|
||||
### Participants
|
||||
|
||||
|
|
@ -202,7 +202,7 @@ noteText | Styles for the text on in the note boxes.
|
|||
### Sample stylesheet
|
||||
|
||||
|
||||
```
|
||||
```css
|
||||
|
||||
body {
|
||||
background: white;
|
||||
|
|
@ -1,12 +1,16 @@
|
|||
---
|
||||
order: 10
|
||||
---
|
||||
|
||||
#Upgrading to from version -0.4.0
|
||||
|
||||
Some of the interfaces has been upgraded.
|
||||
|
||||
#Initialization
|
||||
##Initialization
|
||||
|
||||
mermaid_config is no longer used. Instead a call to mermaid initialize is done as in the example below:
|
||||
|
||||
## version 0.4.0
|
||||
### version 0.4.0
|
||||
|
||||
```
|
||||
mermaid_config = {
|
||||
|
|
@ -14,7 +18,7 @@ mermaid_config = {
|
|||
};
|
||||
```
|
||||
|
||||
## will look like below in version 0.5.0
|
||||
### will look like below in version 0.5.0
|
||||
|
||||
```
|
||||
mermaid.initialize({
|
||||
|
|
@ -0,0 +1,316 @@
|
|||
---
|
||||
title: Usage
|
||||
order: 1
|
||||
---
|
||||
#Usage
|
||||
##Installation
|
||||
|
||||
Either use the npm or bower package managers as per below:
|
||||
|
||||
```
|
||||
bower install mermaid --save-dev
|
||||
```
|
||||
|
||||
```
|
||||
npm install mermaid --save-dev
|
||||
```
|
||||
|
||||
Or download javascript files as per the url below, note that #version# should be replaced with version of choice:
|
||||
|
||||
```
|
||||
https://cdn.rawgit.com/knsv/mermaid/#version#/dist/mermaid.min.js
|
||||
```
|
||||
|
||||
Ex:
|
||||
* [version 0.5.1](https://cdn.rawgit.com/knsv/mermaid/0.5.1/dist/mermaid.min.js)
|
||||
|
||||
|
||||
There are some bundles to choose from:
|
||||
* mermaid.js, mermaid.min.js This bundle contains everything you need to run mermaid
|
||||
* mermaid.slim.js, mermaid.slim.min.js This bundle does not contain d3 which is useful for sites that already have d3 in place
|
||||
* mermaidAPI.js, mermaidAPI.min.js, This bundle does not contain the web integration provided in the other packages but has a render function instead returns svg code.
|
||||
|
||||
|
||||
** Important: **
|
||||
> It's best to use a specific tag or commit hash in the URL (not a branch). Files are cached permanently after the first request.
|
||||
|
||||
Read more about that at [https://rawgit.com/](https://rawgit.com/)
|
||||
|
||||
##Simple usage on a web page
|
||||
|
||||
The easiest way to integrate mermaid on a web page requires two elements:
|
||||
1. Inclusion of the mermaid framework in the html page using a script tag
|
||||
2. A graph definition on the web page
|
||||
|
||||
If these things are in place mermaid listens to the page load event and when fires, when the page has loaded, it will
|
||||
locate the graphs n the page and transform them to svg files.
|
||||
|
||||
###Include mermaid on your web page:
|
||||
|
||||
```
|
||||
<script src="mermaid.min.js"></script>
|
||||
<script>mermaid.initialize({startOnLoad:true});</script>
|
||||
|
||||
```
|
||||
|
||||
Further down on your page mermaid will look for tags with ```class="mermaid"```. From these tags mermaid will try to
|
||||
read the chart definiton which will be replaced with the svg chart.
|
||||
|
||||
|
||||
###Define a chart like this:
|
||||
|
||||
```
|
||||
<div class="mermaid">
|
||||
CHART DEFINITION GOES HERE
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
Would end up like this:
|
||||
```
|
||||
<div class="mermaid" id="mermaidChart0">
|
||||
<svg>
|
||||
Chart ends up here
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
```
|
||||
An id is also added to mermaid tags without id.
|
||||
|
||||
### Calling **mermaid.init**
|
||||
By default, **mermaid.init** will be called when the document is ready, finding all elements with
|
||||
``class="mermaid"``. If you are adding content after mermaid is loaded, or otherwise need
|
||||
finer-grained control of this behavior, you can call `init` yourself with:
|
||||
- a configuration object
|
||||
- some nodes, as
|
||||
- a node
|
||||
- an a array-like of nodes
|
||||
- or W3C selector that will find your nodes
|
||||
|
||||
Example:
|
||||
```
|
||||
mermaid.init({noteMargin: 10}, ".someOtherClass");
|
||||
```
|
||||
Or with no config object, and a jQuery selection:
|
||||
```
|
||||
mermaid.init(undefined, $("#someId .yetAnotherClass"));
|
||||
```
|
||||
|
||||
<aside class="warning">This type of integration is deprecated instead the preferred way of handling more complex integration is to us the mermaidAPI instead.</aside>
|
||||
|
||||
##Usage with browserify
|
||||
The reader is assumed to know about CommonJS style of module handling and how to use browserify. If not a good place
|
||||
to start would be http://browserify.org/ website.
|
||||
|
||||
Minimalistic javascript:
|
||||
```
|
||||
mermaid = require('mermaid');
|
||||
console.log('Test page! mermaid version'+mermaid.version());
|
||||
```
|
||||
Bundle the javascript with browserify.
|
||||
|
||||
Us the created bundle on a web page as per example below:
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="mermaid.css" />
|
||||
<script src="bundle.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mermaid">
|
||||
graph LR
|
||||
A-->B
|
||||
B-->C
|
||||
C-->A
|
||||
D-->C
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
##API usage
|
||||
The main idea with the API is to be able to call a render function with graph defintion as a string. The render function
|
||||
will render the graph and call a callback with the resulting svg code. With this approach it is up to the site creator to
|
||||
fetch the graph definition from the site, perhaps from a textarea, render it and place the graph somewhere in the site.
|
||||
|
||||
To do this, include mermaidAPI on your web website instead of mermaid.js. The example below show an outline of how this
|
||||
could be used. The example just logs the resulting svg to the javascript console.
|
||||
|
||||
```
|
||||
<script src="mermaidAPI.js"></script>
|
||||
|
||||
<script>
|
||||
mermaidAPI.initialize({
|
||||
startOnLoad:false
|
||||
});
|
||||
// Example of using the API
|
||||
$(function(){
|
||||
var graphDefinition = 'graph TB\na-->b';
|
||||
var graph = mermaidAPI.render(graphDefinition);
|
||||
$("#graphDiv").html(graph);
|
||||
});
|
||||
</script>
|
||||
```
|
||||
##Sample of API usage together with browserify
|
||||
```
|
||||
$ = require('jquery');
|
||||
mermaidAPI = require('mermaid').mermaidAPI;
|
||||
mermaidAPI.initialize({
|
||||
startOnLoad:false
|
||||
});
|
||||
|
||||
$(function(){
|
||||
var graphDefinition = 'graph TB\na-->b';
|
||||
var cb = function(html){
|
||||
console.log(html);
|
||||
}
|
||||
mermaidAPI.render('id1',graphDefinition,cb);
|
||||
});
|
||||
```
|
||||
|
||||
## Example of a marked renderer
|
||||
|
||||
This is the renderer used for transforming the documentation from markdown to html with mermaid diagrams in the html.
|
||||
|
||||
```
|
||||
var renderer = new marked.Renderer();
|
||||
renderer.code = function (code, language) {
|
||||
if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){
|
||||
return '<div class="mermaid">'+code+'</div>';
|
||||
}
|
||||
else{
|
||||
return '<pre><code>'+code+'</code></pre>';
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
Another example in coffeescript that also includes the mermaid script tag into the generated markup.
|
||||
```
|
||||
marked = require 'marked'
|
||||
|
||||
module.exports = (options) ->
|
||||
hasMermaid = false
|
||||
renderer = new marked.Renderer()
|
||||
renderer.defaultCode = renderer.code
|
||||
renderer.code = (code, language) ->
|
||||
if language is 'mermaid'
|
||||
html = ''
|
||||
if not hasMermaid
|
||||
hasMermaid = true
|
||||
html += '&ltscript src="'+options.mermaidPath+'"></script>'
|
||||
html + '&ltdiv class="mermaid">'+code+'</div>'
|
||||
else
|
||||
@defaultCode(code, language)
|
||||
|
||||
renderer
|
||||
```
|
||||
|
||||
## Advanced usage
|
||||
|
||||
**Error handling**
|
||||
|
||||
When the parser encounters invalid syntax the **mermaid.parseError** function is called. It is possible to override this
|
||||
function in order to handle the error in an application specific way.
|
||||
|
||||
**Parsing text without rendering**
|
||||
|
||||
It is also possible to validate the syntax before rendering in order to streamline the user experience. The function
|
||||
**mermaid.parse(txt)** takes a text string as an argument and returns true if the text is syntactically correct and
|
||||
false if it is not. The parseError function will be called when the parse function returns false.
|
||||
|
||||
The code-example below in meta code illustrates how this could work:
|
||||
|
||||
```js
|
||||
|
||||
mermaid.parseError = function(err,hash){
|
||||
displayErrorInGui(err);
|
||||
};
|
||||
|
||||
var textFieldUpdated = function(){
|
||||
var textStr = getTextFromFormField('code');
|
||||
|
||||
if(mermaid.parse(textStr)){
|
||||
reRender(textStr)
|
||||
}
|
||||
};
|
||||
|
||||
bindEventHandler('change', 'code', textFieldUpdated);
|
||||
```
|
||||
|
||||
#Configuration
|
||||
Mermaid takes a number of options which lets you tweak the rendering of the diagrams. Currently there are three ways of
|
||||
setting the options in mermaid.
|
||||
|
||||
1. Instantiation of the configuration using the initialize call
|
||||
2. *Using the global mermaid object* - deprecated
|
||||
3. *using the global mermaid_config object* - deprecated
|
||||
4. Instantiation of the configuration using the **mermaid.init** call
|
||||
|
||||
The list above has two ways to many of doing this. Three are deprecated and will eventually be removed. The list of
|
||||
configuration objects are described [in the mermaidAPI documentation](http://knsv.github.io/mermaid/index.html#configuration28).
|
||||
|
||||
##Using the mermaidAPI.initialize/mermaid.initialize call
|
||||
|
||||
The future proof way of setting the configuration is by using the initialization call to mermaid or mermaidAPi depending
|
||||
on what kind of integration you use.
|
||||
|
||||
```
|
||||
<script src="../dist/mermaid.js"></script>
|
||||
<script>
|
||||
var config = {
|
||||
startOnLoad:true,
|
||||
flowchart:{
|
||||
useMaxWidth:false,
|
||||
htmlLabels:true
|
||||
}
|
||||
};
|
||||
mermaid.initialize(config);
|
||||
</script>
|
||||
```
|
||||
|
||||
<aside class="success">This is the preferred way of configuring mermaid.</aside>
|
||||
|
||||
|
||||
##Using the mermaid object
|
||||
|
||||
Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
|
||||
approach are:
|
||||
|
||||
* mermaid.startOnLoad
|
||||
* mermaid.htmlLabels
|
||||
|
||||
```
|
||||
mermaid.startOnLoad = true;
|
||||
```
|
||||
|
||||
<aside class="info">This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations</aside>
|
||||
|
||||
##Using the mermaid_config
|
||||
|
||||
Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
|
||||
approach are:
|
||||
|
||||
* mermaid_config.startOnLoad
|
||||
* mermaid_config.htmlLabels
|
||||
|
||||
```
|
||||
mermaid_config.startOnLoad = true;
|
||||
```
|
||||
|
||||
<aside class="info">This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations</aside>
|
||||
|
||||
##Using the mermaid.init call
|
||||
|
||||
Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
|
||||
approach are:
|
||||
|
||||
* mermaid_config.startOnLoad
|
||||
* mermaid_config.htmlLabels
|
||||
|
||||
```
|
||||
mermaid_config.startOnLoad = true;
|
||||
```
|
||||
|
||||
<aside class="info">This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations</aside>
|
||||
Binary file not shown.
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="slate" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " d="" horiz-adv-x="512" />
|
||||
<glyph unicode="" d="M438.857 877.714q119.429 0 220.286-58.857t159.714-159.714 58.857-220.286-58.857-220.286-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857zM512 165.143v108.571q0 8-5.143 13.429t-12.571 5.429h-109.714q-7.429 0-13.143-5.714t-5.714-13.143v-108.571q0-7.429 5.714-13.143t13.143-5.714h109.714q7.429 0 12.571 5.429t5.143 13.429zM510.857 361.714l10.286 354.857q0 6.857-5.714 10.286-5.714 4.571-13.714 4.571h-125.714q-8 0-13.714-4.571-5.714-3.429-5.714-10.286l9.714-354.857q0-5.714 5.714-10t13.714-4.286h105.714q8 0 13.429 4.286t6 10z" />
|
||||
<glyph unicode="" d="M585.143 164.571v91.429q0 8-5.143 13.143t-13.143 5.143h-54.857v292.571q0 8-5.143 13.143t-13.143 5.143h-182.857q-8 0-13.143-5.143t-5.143-13.143v-91.429q0-8 5.143-13.143t13.143-5.143h54.857v-182.857h-54.857q-8 0-13.143-5.143t-5.143-13.143v-91.429q0-8 5.143-13.143t13.143-5.143h256q8 0 13.143 5.143t5.143 13.143zM512 676.571v91.429q0 8-5.143 13.143t-13.143 5.143h-109.714q-8 0-13.143-5.143t-5.143-13.143v-91.429q0-8 5.143-13.143t13.143-5.143h109.714q8 0 13.143 5.143t5.143 13.143zM877.714 438.857q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" />
|
||||
<glyph unicode="" d="M733.714 531.428q0 16-10.286 26.286l-52 51.429q-10.857 10.857-25.714 10.857t-25.714-10.857l-233.143-232.571-129.143 129.143q-10.857 10.857-25.714 10.857t-25.714-10.857l-52-51.429q-10.286-10.286-10.286-26.286 0-15.429 10.286-25.714l206.857-206.857q10.857-10.857 25.714-10.857 15.429 0 26.286 10.857l310.286 310.286q10.286 10.286 10.286 25.714zM877.714 438.857q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" />
|
||||
<glyph unicode="" d="M658.286 475.428q0 105.714-75.143 180.857t-180.857 75.143-180.857-75.143-75.143-180.857 75.143-180.857 180.857-75.143 180.857 75.143 75.143 180.857zM950.857 0q0-29.714-21.714-51.429t-51.429-21.714q-30.857 0-51.429 21.714l-196 195.429q-102.286-70.857-228-70.857-81.714 0-156.286 31.714t-128.571 85.714-85.714 128.571-31.714 156.286 31.714 156.286 85.714 128.571 128.571 85.714 156.286 31.714 156.286-31.714 128.571-85.714 85.714-128.571 31.714-156.286q0-125.714-70.857-228l196-196q21.143-21.143 21.143-51.429z" horiz-adv-x="951" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 96 B |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
.mermaid .label{font-family:'trebuchet ms', verdana, arial;color:#333333}.node rect,.node circle,.node polygon{fill:#cde498;stroke:#13540c;stroke-width:1px}.edgePath .path{stroke:green;stroke-width:1.5px}.cluster rect{fill:#cdffb2 !important;rx:4 !important;stroke:#6eaa49 !important;stroke-width:1px !important}.cluster text{fill:#333333}.actor{stroke:#13540c;fill:#cde498}text.actor{fill:black;stroke:none}.actor-line{stroke:grey}.messageLine0{stroke-width:1.5;stroke-dasharray:"2 2";marker-end:"url(#arrowhead)";stroke:#333333}.messageLine1{stroke-width:1.5;stroke-dasharray:"2 2";stroke:#333333}#arrowhead{fill:#333333}#crosshead path{fill:#333333 !important;stroke:#333333 !important}.messageText{fill:#333333;stroke:none}.labelBox{stroke:#326932;fill:#cde498}.labelText{fill:black;stroke:none}.loopText{fill:black;stroke:none}.loopLine{stroke-width:2;stroke-dasharray:"2 2";marker-end:"url(#arrowhead)";stroke:#326932}.note{stroke:#6eaa49;fill:#fff5ad}.noteText{fill:black;stroke:none;font-family:'trebuchet ms', verdana, arial;font-size:14px}.section{stroke:none;opacity:0.2}.section0{fill:#6eaa49}.section2{fill:#6eaa49}.section1,.section3{fill:white;opacity:0.2}.sectionTitle0{fill:#333333}.sectionTitle1{fill:#333333}.sectionTitle2{fill:#333333}.sectionTitle3{fill:#333333}.sectionTitle{text-anchor:start;font-size:11px;text-height:14px}.grid .tick{stroke:lightgrey;opacity:0.3;shape-rendering:crispEdges}.grid path{stroke-width:0}.today{fill:none;stroke:red;stroke-width:2px}.task{stroke-width:2}.taskText{text-anchor:middle;font-size:11px}.taskTextOutsideRight{fill:black;text-anchor:start;font-size:11px}.taskTextOutsideLeft{fill:black;text-anchor:end;font-size:11px}.taskText0,.taskText1,.taskText2,.taskText3{fill:white}.task0,.task1,.task2,.task3{fill:#487e3a;stroke:#13540c}.taskTextOutside0,.taskTextOutside2{fill:black}.taskTextOutside1,.taskTextOutside3{fill:black}.active0,.active1,.active2,.active3{fill:#cde498;stroke:#13540c}.activeText0,.activeText1,.activeText2,.activeText3{fill:black !important}.done0,.done1,.done2,.done3{stroke:grey;fill:lightgrey;stroke-width:2}.doneText0,.doneText1,.doneText2,.doneText3{fill:black !important}.crit0,.crit1,.crit2,.crit3{stroke:#ff8888;fill:red;stroke-width:2}.activeCrit0,.activeCrit1,.activeCrit2,.activeCrit3{stroke:#ff8888;fill:#cde498;stroke-width:2}.doneCrit0,.doneCrit1,.doneCrit2,.doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}.doneCritText0,.doneCritText1,.doneCritText2,.doneCritText3{fill:black !important}.activeCritText0,.activeCritText1,.activeCritText2,.activeCritText3{fill:black !important}.titleText{text-anchor:middle;font-size:18px;fill:black}text{font-family:'trebuchet ms', verdana, arial;font-size:14px}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
/*
|
||||
Five-color theme from a single blue hue.
|
||||
*/
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: #eaeef3;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
.hljs,
|
||||
.hljs-list .hljs-built_in {
|
||||
color: #00193a;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-title,
|
||||
.hljs-important,
|
||||
.hljs-request,
|
||||
.hljs-header,
|
||||
.hljs-javadoctag {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-chunk {
|
||||
color: #738191;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-title,
|
||||
.hljs-parent,
|
||||
.hljs-built_in,
|
||||
.hljs-literal,
|
||||
.hljs-filename,
|
||||
.hljs-value,
|
||||
.hljs-addition,
|
||||
.hljs-tag,
|
||||
.hljs-argument,
|
||||
.hljs-link_label,
|
||||
.hljs-blockquote,
|
||||
.hljs-header {
|
||||
color: #0048ab;
|
||||
}
|
||||
|
||||
.hljs-decorator,
|
||||
.hljs-prompt,
|
||||
.hljs-yardoctag,
|
||||
.hljs-subst,
|
||||
.hljs-symbol,
|
||||
.hljs-doctype,
|
||||
.hljs-regexp,
|
||||
.hljs-preprocessor,
|
||||
.hljs-pragma,
|
||||
.hljs-pi,
|
||||
.hljs-attribute,
|
||||
.hljs-attr_selector,
|
||||
.hljs-javadoc,
|
||||
.hljs-xmlDocTag,
|
||||
.hljs-deletion,
|
||||
.hljs-shebang,
|
||||
.hljs-string .hljs-variable,
|
||||
.hljs-link_url,
|
||||
.hljs-bullet,
|
||||
.hljs-sqbracket,
|
||||
.hljs-phony {
|
||||
color: #4c81c9;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.content h1,.content h2,.content h3,.content h4,body{font-family:"Helvetica Neue", Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;font-size:13px}.content h1,.content h2,.content h3,.content h4{font-weight:bold}.content pre,.content code{font-family:Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;font-size:12px;line-height:1.5}.content pre,.content code{word-break:break-all;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}@font-face{font-family:'slate';src:url("../fonts/slate.eot?-syv14m");src:url("../fonts/slate.eot?#iefix-syv14m") format("embedded-opentype"),url("../fonts/slate.woff2?-syv14m") format("woff2"),url("../fonts/slate.woff?-syv14m") format("woff"),url("../fonts/slate.ttf?-syv14m") format("truetype"),url("../fonts/slate.svg?-syv14m#slate") format("svg");font-weight:normal;font-style:normal}.content aside.warning:before,.content aside.notice:before,.content aside.success:before{font-family:'slate';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1}.content aside.warning:before{content:"\e600"}.content aside.notice:before{content:"\e602"}.content aside.success:before{content:"\e606"}.tocify,.toc-footer,.lang-selector,.search,#nav-button{display:none}.tocify-wrapper>img{margin:0 auto;display:block}.content{font-size:12px}.content pre,.content code{border:1px solid #999;border-radius:5px;font-size:0.8em}.content pre{padding:1.3em}.content code{padding:0.2em}.content table{border:1px solid #999}.content table tr{border-bottom:1px solid #999}.content table td,.content table th{padding:0.7em}.content p{line-height:1.5}.content a{text-decoration:none;color:#000}.content h1{font-size:2.5em;padding-top:0.5em;padding-bottom:0.5em;margin-top:1em;margin-bottom:21px;border:2px solid #ccc;border-width:2px 0;text-align:center}.content h2{font-size:1.8em;margin-top:2em;border-top:2px solid #ccc;padding-top:0.8em}.content h1+h2,.content h1+div+h2{border-top:none;padding-top:0;margin-top:0}.content h3,.content h4{font-size:0.8em;margin-top:1.5em;margin-bottom:0.8em;text-transform:uppercase}.content h5,.content h6{text-transform:uppercase}.content aside{padding:1em;border:1px solid #ccc;border-radius:5px;margin-top:1.5em;margin-bottom:1.5em;line-height:1.6}.content aside:before{vertical-align:middle;padding-right:0.5em;font-size:14px}
|
||||
|
|
@ -0,0 +1,913 @@
|
|||
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
|
||||
display: block
|
||||
}
|
||||
|
||||
audio, canvas, progress, video {
|
||||
display: inline-block;
|
||||
vertical-align: baseline
|
||||
}
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0
|
||||
}
|
||||
|
||||
[hidden], template {
|
||||
display: none
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent
|
||||
}
|
||||
|
||||
a:active, a:hover {
|
||||
outline: 0
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0
|
||||
}
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%
|
||||
}
|
||||
|
||||
sub, sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 1em 40px
|
||||
}
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
code, kbd, pre, samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em
|
||||
}
|
||||
|
||||
button, input, optgroup, select, textarea {
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
button {
|
||||
overflow: visible
|
||||
}
|
||||
|
||||
button, select {
|
||||
text-transform: none
|
||||
}
|
||||
|
||||
button, html input[type="button"], input[type="reset"], input[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
button[disabled], html input[disabled] {
|
||||
cursor: default
|
||||
}
|
||||
|
||||
button::-moz-focus-inner, input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
input {
|
||||
line-height: normal
|
||||
}
|
||||
|
||||
input[type="checkbox"], input[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
box-sizing: content-box
|
||||
}
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em
|
||||
}
|
||||
|
||||
legend {
|
||||
border: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
optgroup {
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6, html, body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif;
|
||||
font-size: 13px
|
||||
}
|
||||
|
||||
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.content code, .content pre {
|
||||
font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
|
||||
font-size: 12px;
|
||||
line-height: 1.5
|
||||
|
||||
|
||||
}
|
||||
|
||||
.content code {
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto
|
||||
|
||||
}
|
||||
|
||||
.highlight table td {
|
||||
padding: 5px
|
||||
}
|
||||
|
||||
.highlight table pre {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.highlight, .highlight .w {
|
||||
color: #f8f8f2;
|
||||
background-color: #272822
|
||||
}
|
||||
|
||||
.highlight .err {
|
||||
color: #151515;
|
||||
background-color: #ac4142
|
||||
}
|
||||
|
||||
.highlight .c, .highlight .cd, .highlight .cm, .highlight .c1, .highlight .cs {
|
||||
color: #505050
|
||||
}
|
||||
|
||||
.highlight .cp {
|
||||
color: #f4bf75
|
||||
}
|
||||
|
||||
.highlight .nt {
|
||||
color: #f4bf75
|
||||
}
|
||||
|
||||
.highlight .o, .highlight .ow {
|
||||
color: #d0d0d0
|
||||
}
|
||||
|
||||
.highlight .p, .highlight .pi {
|
||||
color: #d0d0d0
|
||||
}
|
||||
|
||||
.highlight .gi {
|
||||
color: #90a959
|
||||
}
|
||||
|
||||
.highlight .gd {
|
||||
color: #ac4142
|
||||
}
|
||||
|
||||
.highlight .gh {
|
||||
color: #6a9fb5;
|
||||
background-color: #151515;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
|
||||
color: #aa759f
|
||||
}
|
||||
|
||||
.highlight .kc {
|
||||
color: #d28445
|
||||
}
|
||||
|
||||
.highlight .kt {
|
||||
color: #d28445
|
||||
}
|
||||
|
||||
.highlight .kd {
|
||||
color: #d28445
|
||||
}
|
||||
|
||||
.highlight .s, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
|
||||
color: #90a959
|
||||
}
|
||||
|
||||
.highlight .sr {
|
||||
color: #75b5aa
|
||||
}
|
||||
|
||||
.highlight .si {
|
||||
color: #8f5536
|
||||
}
|
||||
|
||||
.highlight .se {
|
||||
color: #8f5536
|
||||
}
|
||||
|
||||
.highlight .nn {
|
||||
color: #f4bf75
|
||||
}
|
||||
|
||||
.highlight .nc {
|
||||
color: #f4bf75
|
||||
}
|
||||
|
||||
.highlight .no {
|
||||
color: #f4bf75
|
||||
}
|
||||
|
||||
.highlight .na {
|
||||
color: #6a9fb5
|
||||
}
|
||||
|
||||
.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mb, .highlight .mx {
|
||||
color: #90a959
|
||||
}
|
||||
|
||||
.highlight .ss {
|
||||
color: #90a959
|
||||
}
|
||||
|
||||
.highlight .c, .highlight .cm, .highlight .c1, .highlight .cs {
|
||||
color: #909090
|
||||
}
|
||||
|
||||
.highlight, .highlight .w {
|
||||
background-color: #292929
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'slate';
|
||||
src: url("../fonts/slate.eot?-syv14m");
|
||||
src: url("../fonts/slate.eot?#iefix-syv14m") format("embedded-opentype"), url("../fonts/slate.woff2?-syv14m") format("woff2"), url("../fonts/slate.woff?-syv14m") format("woff"), url("../fonts/slate.ttf?-syv14m") format("truetype"), url("../fonts/slate.svg?-syv14m#slate") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal
|
||||
}
|
||||
|
||||
.content aside.warning:before, .content aside.notice:before, .content aside.success:before, .tocify-wrapper > .search:before {
|
||||
font-family: 'slate';
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1
|
||||
}
|
||||
|
||||
.content aside.warning:before {
|
||||
content: "\e600"
|
||||
}
|
||||
|
||||
.content aside.notice:before {
|
||||
content: "\e602"
|
||||
}
|
||||
|
||||
.content aside.success:before {
|
||||
content: "\e606"
|
||||
}
|
||||
|
||||
.tocify-wrapper > .search:before {
|
||||
content: "\e607"
|
||||
}
|
||||
|
||||
html, body {
|
||||
color: #333;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-color: #ffffff;
|
||||
height: 100%;
|
||||
-webkit-text-size-adjust: none
|
||||
}
|
||||
|
||||
#toc > ul > li > a > span {
|
||||
float: right;
|
||||
background-color: #2484FF;
|
||||
border-radius: 40px;
|
||||
width: 20px
|
||||
}
|
||||
|
||||
.tocify-wrapper {
|
||||
transition: left 0.3s ease-in-out;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
position: fixed;
|
||||
z-index: 30;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 230px;
|
||||
background-color: #525151;
|
||||
font-size: 13px;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.tocify-wrapper .lang-selector {
|
||||
display: none
|
||||
}
|
||||
|
||||
.tocify-wrapper .lang-selector a {
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em
|
||||
}
|
||||
|
||||
.tocify-wrapper > img {
|
||||
display: block
|
||||
}
|
||||
|
||||
.tocify-wrapper > .search {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.tocify-wrapper > .search input {
|
||||
background: #393939;
|
||||
border-width: 0 0 1px 0;
|
||||
border-color: #666;
|
||||
padding: 6px 0 6px 20px;
|
||||
box-sizing: border-box;
|
||||
margin: 10px 15px;
|
||||
width: 200px;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
border-radius: 0
|
||||
}
|
||||
|
||||
.tocify-wrapper > .search:before {
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
left: 15px;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.tocify-wrapper img + .tocify {
|
||||
margin-top: 20px
|
||||
}
|
||||
|
||||
.tocify-wrapper .search-results {
|
||||
margin-top: 0;
|
||||
box-sizing: border-box;
|
||||
height: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
transition-property: height, margin;
|
||||
transition-duration: 180ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 8px), linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent 8px), linear-gradient(to bottom, #000, transparent 1.5px), linear-gradient(to top, #939393, rgba(147, 147, 147, 0) 1.5px), #262626
|
||||
}
|
||||
|
||||
.tocify-wrapper .search-results.visible {
|
||||
height: 30%;
|
||||
margin-bottom: 1em
|
||||
}
|
||||
|
||||
.tocify-wrapper .search-results li {
|
||||
margin: 1em 15px;
|
||||
line-height: 1
|
||||
}
|
||||
|
||||
.tocify-wrapper .search-results a {
|
||||
color: #fff;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.tocify-wrapper .search-results a:hover {
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
.tocify-wrapper .tocify-item > a, .tocify-wrapper .toc-footer li {
|
||||
padding: 0 15px 0 15px;
|
||||
display: block;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis
|
||||
}
|
||||
|
||||
.tocify-wrapper ul, .tocify-wrapper li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 28px
|
||||
}
|
||||
|
||||
.tocify-wrapper li {
|
||||
color: #fff;
|
||||
transition-property: background;
|
||||
transition-timing-function: linear;
|
||||
transition-duration: 230ms
|
||||
}
|
||||
|
||||
.tocify-wrapper .tocify-focus {
|
||||
box-shadow: 0px 1px 0px #000;
|
||||
background-color: #2467af;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.tocify-wrapper .tocify-subheader {
|
||||
display: none;
|
||||
background-color: #262626;
|
||||
font-weight: 500;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 8px), linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent 8px), linear-gradient(to bottom, #000, transparent 1.5px), linear-gradient(to top, #939393, rgba(147, 147, 147, 0) 1.5px), #262626
|
||||
}
|
||||
|
||||
.tocify-wrapper .tocify-subheader .tocify-item > a {
|
||||
padding-left: 25px;
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
.tocify-wrapper .tocify-subheader > li:last-child {
|
||||
box-shadow: none
|
||||
}
|
||||
|
||||
.tocify-wrapper .toc-footer {
|
||||
padding: 1em 0;
|
||||
margin-top: 1em;
|
||||
border-top: 1px dashed #666
|
||||
}
|
||||
|
||||
.tocify-wrapper .toc-footer li, .tocify-wrapper .toc-footer a {
|
||||
color: #fff;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.tocify-wrapper .toc-footer a:hover {
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
.tocify-wrapper .toc-footer li {
|
||||
font-size: 0.8em;
|
||||
line-height: 1.7;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
#nav-button {
|
||||
padding: 0 1.5em 5em 0;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
opacity: 0.7;
|
||||
line-height: 16px;
|
||||
transition: left 0.3s ease-in-out
|
||||
}
|
||||
|
||||
#nav-button span {
|
||||
display: block;
|
||||
padding: 6px 6px 6px;
|
||||
background-color: rgba(234, 242, 246, 0.7);
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: rotate(-90deg) translate(-100%, 0);
|
||||
transform: rotate(-90deg) translate(-100%, 0);
|
||||
border-radius: 0 0 0 5px
|
||||
}
|
||||
|
||||
#nav-button img {
|
||||
height: 16px;
|
||||
vertical-align: bottom
|
||||
}
|
||||
|
||||
#nav-button:hover {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
#nav-button.open {
|
||||
left: 230px
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
margin-left: 230px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background-color: #eaf2f6;
|
||||
min-height: 100%;
|
||||
padding-bottom: 1px
|
||||
}
|
||||
|
||||
.page-wrapper .dark-box {
|
||||
width: 50%;
|
||||
background-color: #393939;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0
|
||||
}
|
||||
|
||||
.page-wrapper .lang-selector {
|
||||
position: fixed;
|
||||
z-index: 50;
|
||||
border-bottom: 5px solid #393939
|
||||
}
|
||||
|
||||
.lang-selector {
|
||||
background-color: #222;
|
||||
width: 100%;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.lang-selector a {
|
||||
display: block;
|
||||
float: left;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 0 10px;
|
||||
line-height: 30px;
|
||||
outline: 0
|
||||
}
|
||||
|
||||
.lang-selector a:active, .lang-selector a:focus {
|
||||
background-color: #111;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.lang-selector a.active {
|
||||
background-color: #393939;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.lang-selector:after {
|
||||
content: '';
|
||||
clear: both;
|
||||
display: block
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 30
|
||||
}
|
||||
|
||||
.content:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.content > h1, .content > h2, .content > h3, .content > h4, .content > h5, .content > h6, .content > p, .content > table, .content > ul, .content > ol, .content > aside, .content > dl {
|
||||
margin-right: 50%;
|
||||
padding: 0 28px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
text-shadow: 0px 1px 0px #fff
|
||||
}
|
||||
|
||||
.content > ul, .content > ol {
|
||||
padding-left: 43px
|
||||
}
|
||||
|
||||
.content > h1, .content > h2, .content > div {
|
||||
clear: both
|
||||
}
|
||||
|
||||
.content h1 {
|
||||
font-size: 30px;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin-bottom: 21px;
|
||||
margin-top: 2em;
|
||||
border-top: 1px solid #ddd;
|
||||
background-image: linear-gradient(to bottom, #fff, #f9f9f9)
|
||||
}
|
||||
|
||||
.content h1:first-child, .content div:first-child + h1 {
|
||||
border-top-width: 0;
|
||||
margin-top: 0
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
font-size: 20px;
|
||||
margin-top: 4em;
|
||||
margin-bottom: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
padding-top: 1.2em;
|
||||
padding-bottom: 1.2em;
|
||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0))
|
||||
}
|
||||
|
||||
.content h1 + h2, .content h1 + div + h2 {
|
||||
margin-top: -21px;
|
||||
border-top: none
|
||||
}
|
||||
|
||||
.content h3, .content h4, .content h5, .content h6 {
|
||||
font-size: 15px;
|
||||
margin-top: 2.5em;
|
||||
margin-bottom: 0.8em
|
||||
}
|
||||
|
||||
.content h4, .content h5, .content h6 {
|
||||
font-size: 10px
|
||||
}
|
||||
|
||||
.content hr {
|
||||
margin: 2em 0;
|
||||
border-top: 2px solid #393939;
|
||||
border-bottom: 2px solid #eaf2f6
|
||||
}
|
||||
|
||||
.content table {
|
||||
margin-bottom: 1em;
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
.content table th, .content table td {
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
line-height: 1.6
|
||||
}
|
||||
|
||||
.content table th {
|
||||
padding: 5px 10px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
vertical-align: bottom
|
||||
}
|
||||
|
||||
.content table td {
|
||||
padding: 10px
|
||||
}
|
||||
|
||||
.content table tr:last-child {
|
||||
border-bottom: 1px solid #ccc
|
||||
}
|
||||
|
||||
.content table tr:nth-child(odd) > td {
|
||||
background-color: #f9fbfc
|
||||
}
|
||||
|
||||
.content table tr:nth-child(even) > td {
|
||||
background-color: #f3f7fa
|
||||
}
|
||||
|
||||
.content dt {
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.content dd {
|
||||
margin-left: 15px
|
||||
}
|
||||
|
||||
.content p, .content li, .content dt, .content dd {
|
||||
line-height: 1.6;
|
||||
margin-top: 0
|
||||
}
|
||||
|
||||
.content img {
|
||||
max-width: 100%
|
||||
}
|
||||
|
||||
.content code {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
padding: 3px;
|
||||
border-radius: 3px
|
||||
}
|
||||
|
||||
.content pre > code {
|
||||
background-color: transparent;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.content aside {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
text-shadow: 0 1px 0 #c6dde9;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
background: #8fbcd4;
|
||||
line-height: 1.6
|
||||
}
|
||||
|
||||
.content aside.warning {
|
||||
background-color: #c97a7e;
|
||||
text-shadow: 0 1px 0 #dfb0b3
|
||||
}
|
||||
|
||||
.content aside.success {
|
||||
background-color: #6ac174;
|
||||
text-shadow: 0 1px 0 #a0d7a6
|
||||
}
|
||||
|
||||
.content aside:before {
|
||||
vertical-align: middle;
|
||||
padding-right: 0.5em;
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
.content .search-highlight {
|
||||
padding: 2px;
|
||||
margin: -2px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #F7E633;
|
||||
text-shadow: 1px 1px 0 #666;
|
||||
background: linear-gradient(to top left, #f7e633 0%, #f1d32f 100%)
|
||||
}
|
||||
|
||||
.content pre, .content blockquote {
|
||||
/*background-color: #292929;*/
|
||||
background-color: #FBF8EF;
|
||||
color: #fff;
|
||||
padding: 2em 28px;
|
||||
margin: 0;
|
||||
width: 50%;
|
||||
float: right;
|
||||
clear: right;
|
||||
box-sizing: border-box;
|
||||
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4)
|
||||
}
|
||||
|
||||
.content pre > p, .content blockquote > p {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.content pre a, .content blockquote a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border-bottom: dashed 1px #ccc
|
||||
}
|
||||
|
||||
.content blockquote > p {
|
||||
background-color: #eee;
|
||||
border-radius: 0px;
|
||||
padding: 13px;
|
||||
color: #000;
|
||||
border-left: 4px solid #f0ad4e;
|
||||
/*background-color: #eee;*/
|
||||
/*border-radius: 5px;*/
|
||||
/*padding: 13px;*/
|
||||
/*color: #ccc;*/
|
||||
/*border-top: 1px solid #000;*/
|
||||
/*border-bottom: 1px solid #404040*/
|
||||
}
|
||||
|
||||
@media (max-width: 930px) {
|
||||
.tocify-wrapper {
|
||||
left: -230px
|
||||
}
|
||||
|
||||
.tocify-wrapper.open {
|
||||
left: 0
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
#nav-button {
|
||||
display: block
|
||||
}
|
||||
|
||||
.tocify-wrapper .tocify-item > a {
|
||||
padding-top: 0.3em;
|
||||
padding-bottom: 0.3em
|
||||
}
|
||||
}
|
||||
|
||||
/*@media (max-width: 700px) {*/
|
||||
.dark-box {
|
||||
display: none
|
||||
}
|
||||
|
||||
.content > h1, .content > h2, .content > h3, .content > h4, .content > h5, .content > h6, .content > p, .content > table, .content > ul, .content > ol, .content > aside, .content > dl {
|
||||
margin-right: 0
|
||||
}
|
||||
|
||||
.tocify-wrapper .lang-selector {
|
||||
display: block
|
||||
}
|
||||
|
||||
.page-wrapper .lang-selector {
|
||||
display: none
|
||||
}
|
||||
|
||||
.content pre, .content blockquote {
|
||||
width: auto;
|
||||
float: none
|
||||
}
|
||||
|
||||
.content > pre + h1, .content > blockquote + h1, .content > pre + h2, .content > blockquote + h2, .content > pre + h3, .content > blockquote + h3, .content > pre + h4, .content > blockquote + h4, .content > pre + h5, .content > blockquote + h5, .content > pre + h6, .content > blockquote + h6, .content > pre + p, .content > blockquote + p, .content > pre + table, .content > blockquote + table, .content > pre + ul, .content > blockquote + ul, .content > pre + ol, .content > blockquote + ol, .content > pre + aside, .content > blockquote + aside, .content > pre + dl, .content > blockquote + dl {
|
||||
margin-top: 28px
|
||||
}
|
||||
/*}*/
|
||||
|
||||
.content code, .content pre {
|
||||
font-size: 12px;
|
||||
/*-webkit-box-shadow: 0 0 0 3px #eee;*/
|
||||
/*box-shadow: 0 0 0 3px #eee;*/
|
||||
overflow: auto !important;
|
||||
margin-bottom: 0;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
color: #4d4d4c;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.content pre {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.content pre {
|
||||
-webkit-box-shadow: 0 0 0 3px #eee;
|
||||
box-shadow: 0 0 0 3px #eee;
|
||||
width:900px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
background: #FBF8EF;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: #FFF;
|
||||
}
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
/*
|
||||
|
||||
Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
|
||||
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: #fdf6e3;
|
||||
color: #657b83;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.diff .hljs-header,
|
||||
.hljs-doctype,
|
||||
.hljs-pi,
|
||||
.lisp .hljs-string {
|
||||
color: #93a1a1;
|
||||
}
|
||||
|
||||
/* Solarized Green */
|
||||
.hljs-keyword,
|
||||
.hljs-winutils,
|
||||
.method,
|
||||
.hljs-addition,
|
||||
.css .hljs-tag,
|
||||
.hljs-request,
|
||||
.hljs-status,
|
||||
.nginx .hljs-title {
|
||||
color: #859900;
|
||||
}
|
||||
|
||||
/* Solarized Cyan */
|
||||
.hljs-number,
|
||||
.hljs-command,
|
||||
.hljs-string,
|
||||
.hljs-tag .hljs-value,
|
||||
.hljs-rule .hljs-value,
|
||||
.hljs-doctag,
|
||||
.tex .hljs-formula,
|
||||
.hljs-regexp,
|
||||
.hljs-hexcolor,
|
||||
.hljs-link_url {
|
||||
color: #2aa198;
|
||||
}
|
||||
|
||||
/* Solarized Blue */
|
||||
.hljs-title,
|
||||
.hljs-localvars,
|
||||
.hljs-chunk,
|
||||
.hljs-decorator,
|
||||
.hljs-built_in,
|
||||
.hljs-identifier,
|
||||
.vhdl .hljs-literal,
|
||||
.hljs-id,
|
||||
.css .hljs-function,
|
||||
.hljs-name {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
/* Solarized Yellow */
|
||||
.hljs-attribute,
|
||||
.hljs-variable,
|
||||
.lisp .hljs-body,
|
||||
.smalltalk .hljs-number,
|
||||
.hljs-constant,
|
||||
.hljs-class .hljs-title,
|
||||
.hljs-parent,
|
||||
.hljs-type,
|
||||
.hljs-link_reference {
|
||||
color: #b58900;
|
||||
}
|
||||
|
||||
/* Solarized Orange */
|
||||
.hljs-preprocessor,
|
||||
.hljs-preprocessor .hljs-keyword,
|
||||
.hljs-pragma,
|
||||
.hljs-shebang,
|
||||
.hljs-symbol,
|
||||
.hljs-symbol .hljs-string,
|
||||
.diff .hljs-change,
|
||||
.hljs-special,
|
||||
.hljs-attr_selector,
|
||||
.hljs-subst,
|
||||
.hljs-cdata,
|
||||
.css .hljs-pseudo,
|
||||
.hljs-header {
|
||||
color: #cb4b16;
|
||||
}
|
||||
|
||||
/* Solarized Red */
|
||||
.hljs-deletion,
|
||||
.hljs-important {
|
||||
color: #dc322f;
|
||||
}
|
||||
|
||||
/* Solarized Violet */
|
||||
.hljs-link_label {
|
||||
color: #6c71c4;
|
||||
}
|
||||
|
||||
.tex .hljs-formula {
|
||||
background: #eee8d5;
|
||||
}
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown.</title>
|
||||
|
||||
<link href="stylesheets/screen.css" rel="stylesheet" type="text/css" media="screen"/>
|
||||
<link href="stylesheets/print.css" rel="stylesheet" type="text/css" media="print"/>
|
||||
<link href="stylesheets/mermaid.forest.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="stylesheets/solarized_light.css" rel="stylesheet" type="text/css"/>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
||||
<script src="javascripts/lib/mermaid.js"></script>
|
||||
<script src="javascripts/all.js" type="text/javascript"></script>
|
||||
<script src="javascripts/highlight.pack.js" type="text/javascript"></script>
|
||||
|
||||
<script>
|
||||
var g = function (hljs) {
|
||||
var r = "[a-z'][a-zA-Z0-9_']*", c = "(" + r + ":" + r + "|" + r + ")";
|
||||
var keyw = {
|
||||
keyword: 'graph sequenceDiagram participant loop end',
|
||||
typename: 'Note',
|
||||
literal: "false true left right"
|
||||
};
|
||||
return {
|
||||
case_insensitive: false,
|
||||
aliases: ["mermaid"],
|
||||
k: keyw,
|
||||
i: 'for',
|
||||
c: [{
|
||||
cN: "function",
|
||||
b: "^" + r + "\\s*\\(",
|
||||
e: "->",
|
||||
rB: !0,
|
||||
i: "\\(|#|//|/\\*|\\\\|:|;",
|
||||
starts: {
|
||||
e: ";|\\.", k: keyw, c: [
|
||||
{cN: "comment", b: "%", e: "$"}
|
||||
]
|
||||
}
|
||||
},
|
||||
{cN: "comment", b: "%", e: "$"}
|
||||
]
|
||||
};
|
||||
};
|
||||
hljs.registerLanguage('mermaid', g);
|
||||
hljs.initHighlightingOnLoad();
|
||||
$(function () {
|
||||
setupLanguages(["shell", "javascript", "html", "css","mermaid"]);
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="index">
|
||||
<a href="#" id="nav-button">
|
||||
<span>
|
||||
NAV
|
||||
<img src="images/navbar.png"/>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="tocify-wrapper">
|
||||
<img src="images/logo.png"/>
|
||||
|
||||
<div class="lang-selector" style="display:none">
|
||||
<a href="#" data-language-name="shell">shell</a>
|
||||
<a href="#" data-language-name="javascript">javascript</a>
|
||||
<a href="#" data-language-name="html">html</a>
|
||||
<a href="#" data-language-name="css">css</a>
|
||||
</div>
|
||||
<div class="search">
|
||||
<input type="text" class="search" id="input-search" placeholder="Search">
|
||||
</div>
|
||||
<ul class="search-results"></ul>
|
||||
<div id="toc">
|
||||
</div>
|
||||
<ul class="toc-footer">
|
||||
<li><a href='http://github.com/tripit/slate'>Documentation Powered by Slate</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="page-wrapper">
|
||||
<div class="dark-box"></div>
|
||||
<div class="content">
|
||||
{{{contents}}}
|
||||
|
||||
</div>
|
||||
<div class="dark-box">
|
||||
<div class="lang-selector">
|
||||
<a href="#" data-language-name="shell">shell</a>
|
||||
<a href="#" data-language-name="ruby">ruby</a>
|
||||
<a href="#" data-language-name="python">python</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
194
docs/usage.md
194
docs/usage.md
|
|
@ -1,194 +0,0 @@
|
|||
---
|
||||
title: Usage
|
||||
order: 1
|
||||
---
|
||||
#Installation
|
||||
|
||||
Either use the npm or bower package managers as per below:
|
||||
|
||||
```
|
||||
bower install mermaid --save-dev
|
||||
```
|
||||
|
||||
```
|
||||
npm install mermaid --save-dev
|
||||
```
|
||||
|
||||
Or download javascript files:
|
||||
|
||||
* [mermaid including dependencies](https://cdn.rawgit.com/knsv/mermaid/0.d.0/dist/mermaid.min.js)
|
||||
|
||||
|
||||
There are some bundles to choose from:
|
||||
* mermaid.js, mermaid.min.js This bundle contains everything you need to run mermaid
|
||||
* mermaid.slim.js, mermaid.slim.min.js This bundle does not contain d3 which is usefull for sites that already have d3 in place
|
||||
* mermaidAPI.js, mermaidAPI.min.js, This bundle does not contain the web integration provided in the other packages but has a render function instead returns svg code.
|
||||
|
||||
|
||||
** Important: **
|
||||
> It's best to use a specific tag or commit hash in the URL (not a branch). Files are cached permanently after the first request.
|
||||
|
||||
Read more about that at [https://rawgit.com/](https://rawgit.com/)
|
||||
|
||||
# Usage
|
||||
|
||||
Include mermaid on your web page:
|
||||
|
||||
```
|
||||
<script src="mermaid.min.js"></script>
|
||||
<script>mermaid.initialize({startOnLoad:true});</script>
|
||||
|
||||
```
|
||||
|
||||
Further down on your page mermaid will look for tags with ```class="mermaid"```. From these tags mermaid will try to
|
||||
read the chart definiton which will be replaced with the svg chart.
|
||||
|
||||
|
||||
A chart defined like this:
|
||||
|
||||
```
|
||||
<div class="mermaid">
|
||||
CHART DEFINITION GOES HERE
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
Would end up like this:
|
||||
```
|
||||
<div class="mermaid" id="mermaidChart0">
|
||||
<svg>
|
||||
Chart ends up here
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
```
|
||||
An id is also added to mermaid tags without id.
|
||||
|
||||
## Calling `mermaid.init`
|
||||
By default, `mermaid.init` will be called when the document is ready, finding all elements with
|
||||
`class="mermaid"`. If you are adding content after mermaid is loaded, or otherwise need
|
||||
finer-grained control of this behavior, you can call `init` yourself with:
|
||||
- a configuration object
|
||||
- some nodes, as
|
||||
- a node
|
||||
- an a array-like of nodes
|
||||
- or W3C selector that will find your nodes
|
||||
|
||||
Example:
|
||||
```
|
||||
mermaid.init({noteMargin: 10}, ".someOtherClass");
|
||||
```
|
||||
Or with no config object, and a jQuery selection:
|
||||
```
|
||||
mermaid.init(undefined, $("#someId .yetAnotherClass"));
|
||||
```
|
||||
|
||||
#Usage with browserify
|
||||
Minimalistic javascript:
|
||||
```
|
||||
|
||||
mermaid = require('mermaid');
|
||||
```
|
||||
|
||||
#API usage
|
||||
Include mermaid on your web page:
|
||||
|
||||
```
|
||||
<script src="mermaidAPI.js"></script>
|
||||
|
||||
<script>
|
||||
mermaidAPI.initialize({
|
||||
startOnLoad:false
|
||||
});
|
||||
$(function(){
|
||||
var graphDefinition = 'graph TB\na-->b';
|
||||
var graph = mermaidAPI.render(graphDefinition);
|
||||
$("#graphDiv").html(graph);
|
||||
});
|
||||
</script>
|
||||
```
|
||||
#Sample API usage with browserify
|
||||
```
|
||||
$ = require('jquery');
|
||||
mermaidAPI = require('mermaid').mermaidAPI;
|
||||
mermaidAPI.initialize({
|
||||
startOnLoad:false
|
||||
});
|
||||
|
||||
$(function(){
|
||||
var graphDefinition = 'graph TB\na-->b';
|
||||
var cb = function(html){
|
||||
console.log(html);
|
||||
}
|
||||
mermaidAPI.render('id1',graphDefinition,cb);
|
||||
});
|
||||
```
|
||||
|
||||
# Example of marked renderer
|
||||
|
||||
This is the renderer used for transforming the documentation from markdown to html with mermaid diagrams in the html.
|
||||
|
||||
```
|
||||
var renderer = new marked.Renderer();
|
||||
renderer.code = function (code, language) {
|
||||
if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){
|
||||
return '<div class="mermaid">'+code+'</div>';
|
||||
}
|
||||
else{
|
||||
return '<pre><code>'+code+'</code></pre>';
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
Another example in coffeescript that also includes the mermaid script tag into the generated markup.
|
||||
```
|
||||
marked = require 'marked'
|
||||
|
||||
module.exports = (options) ->
|
||||
hasMermaid = false
|
||||
renderer = new marked.Renderer()
|
||||
renderer.defaultCode = renderer.code
|
||||
renderer.code = (code, language) ->
|
||||
if language is 'mermaid'
|
||||
html = ''
|
||||
if not hasMermaid
|
||||
hasMermaid = true
|
||||
html += '<script src="'+options.mermaidPath+'"></script>'
|
||||
html + '<div class="mermaid">'+code+'</div>'
|
||||
else
|
||||
@defaultCode(code, language)
|
||||
|
||||
renderer
|
||||
```
|
||||
|
||||
## Advanced usage
|
||||
|
||||
**Error handling**
|
||||
|
||||
When the parser encounters invalid syntax the **mermaid.parseError** function is called. It is possible to override this
|
||||
function in order to handle the error in an application specific way.
|
||||
|
||||
**Parsing text without rendering**
|
||||
|
||||
It is also possible to validate the syntax before rendering in order to streamline the user experience. The function
|
||||
**mermaid.parse(txt)** takes a text string as an argument and returns true if the text is syntactically correct and
|
||||
false if it is not. The parseError function will be called when the parse function returns false.
|
||||
|
||||
The code-example below in meta code illustrates how this could work:
|
||||
|
||||
```js
|
||||
|
||||
mermaid.parseError = function(err,hash){
|
||||
displayErrorInGui(err);
|
||||
};
|
||||
|
||||
var textFieldUpdated = function(){
|
||||
var textStr = getTextFromFormField('code');
|
||||
|
||||
if(mermaid.parse(textStr)){
|
||||
reRender(textStr)
|
||||
}
|
||||
};
|
||||
|
||||
bindEventHandler('change', 'code', textFieldUpdated);
|
||||
```
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
'use strict';
|
||||
|
||||
var Stream = require('stream');
|
||||
var Path = require('path');
|
||||
|
||||
function gulpRename(obj) {
|
||||
|
||||
var stream = new Stream.Transform({objectMode: true});
|
||||
|
||||
function parsePath(path) {
|
||||
var extname = Path.extname(path);
|
||||
return {
|
||||
dirname: Path.dirname(path),
|
||||
basename: Path.basename(path, extname),
|
||||
extname: extname
|
||||
};
|
||||
}
|
||||
|
||||
stream._transform = function (file, unused, callback) {
|
||||
console.log('a file');
|
||||
callback(null, file);
|
||||
};
|
||||
|
||||
return stream;
|
||||
}
|
||||
|
||||
module.exports = gulpRename;
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
var gulp = require('gulp');
|
||||
var mdvars = require('gulp-mdvars');
|
||||
var vartree = require('gulp-vartree');
|
||||
var gmarked = require('gulp-marked');
|
||||
var marked = require('marked');
|
||||
var concat = require('gulp-concat');
|
||||
var frontMatter = require('gulp-front-matter');
|
||||
var hogan = require('hogan.js');
|
||||
var es = require('event-stream');
|
||||
var fs = require('fs');
|
||||
|
||||
// Compile a template for rendering each page
|
||||
var template = hogan.compile(String(fs.readFileSync('docs/tpl/slate.html')));
|
||||
|
||||
var root = {};
|
||||
var filelist = [];
|
||||
var iterator = function(obj) {
|
||||
var i;
|
||||
for (i = 0; i < obj.childs.length; i++) {
|
||||
var item = obj.childs[i];
|
||||
if (item.folder) {
|
||||
iterator(item);
|
||||
} else {
|
||||
console.log(item.path + item.name);
|
||||
filelist.push('dist/www' + '/' + item.path + item.name + '.html');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var renderer = {
|
||||
code: function(code, language) {
|
||||
if (language === 'mermaid') {
|
||||
|
||||
return '<div class="mermaid">' + code + '</div>';
|
||||
} else {
|
||||
language='css';
|
||||
return '<pre class="'+language+'"><code>' + code + '</code></pre>';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
gulp.task('vartree',['dox','copyContent','copySite'], function() {
|
||||
gulp.src(['build/content/**/*.md'])
|
||||
.pipe(frontMatter({
|
||||
property: 'order' // will put metadata in the file.meta property
|
||||
}))
|
||||
.pipe(vartree({
|
||||
root: root, // the root in which the vartree will be put
|
||||
prop: 'order', // metadata property to collect
|
||||
sortProp: 'order',
|
||||
parent: 'parent' // keep a ref to the parent scope in the file.parent property
|
||||
}))
|
||||
.pipe(gmarked({
|
||||
renderer: renderer,
|
||||
sanitize: false
|
||||
})) // Do whatever you want with the files later
|
||||
.pipe(gulp.dest('build/www')).on('end', function() {
|
||||
iterator(root);
|
||||
gulp.src(filelist)
|
||||
.pipe(concat('index.html'))
|
||||
.pipe(gulp.dest('./build/www')).on('end', function() {
|
||||
filelist.push('build/www' + '/index.html');
|
||||
|
||||
|
||||
gulp.src(filelist)
|
||||
// Run each file through a template
|
||||
.pipe(es.map(function(file, cb) {
|
||||
//console.log('file:',fileList);
|
||||
file.contents = new Buffer(template.render(file));
|
||||
|
||||
cb(null, file);
|
||||
}))
|
||||
// Output to build directory
|
||||
.pipe(gulp.dest('./dist/www'));
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
var dox = require("gulp-dox");
|
||||
var filelog = require('gulp-filelog');
|
||||
var doxJson2Md = require('../plugins/doxJson2Md');
|
||||
var map = require('map-stream');
|
||||
var ext_replace = require('gulp-ext-replace');
|
||||
|
||||
gulp.task("dox",function(){
|
||||
//return gulp.src(['src/**/*.js','!src/**/parser/*.js','!src/**/*.spec.js'])
|
||||
|
||||
return gulp.src(['./src/**/mermaidAPI.js'])
|
||||
.pipe(filelog())
|
||||
.pipe(dox({
|
||||
'raw':true
|
||||
}))
|
||||
.pipe(map(function(file, done){
|
||||
var json = JSON.parse(file.contents.toString());
|
||||
var i;
|
||||
var str = '';
|
||||
for(i=0;i<json.length;i++){
|
||||
//console.log(json[i].description.full);
|
||||
str = str + json[i].description.full + '\n';
|
||||
}
|
||||
file.contents = new Buffer(str);
|
||||
done(null, file);
|
||||
}))
|
||||
.pipe(ext_replace('.md'))
|
||||
.pipe(gulp.dest("./build/content"))
|
||||
});
|
||||
|
||||
gulp.task("copyContent",function() {
|
||||
return gulp.src(['./docs/content/**/*.md'])
|
||||
.pipe(gulp.dest("./build/content"));
|
||||
});
|
||||
|
||||
gulp.task("copyContent",function() {
|
||||
return gulp.src(['./docs/content/**/*.md'])
|
||||
.pipe(gulp.dest("./build/content"));
|
||||
});
|
||||
|
||||
gulp.task("copySite",function() {
|
||||
gulp.src(['./docs/site/*.css'])
|
||||
.pipe(gulp.dest("./dist/www"));
|
||||
gulp.src(['./docs/site/*.eot'])
|
||||
.pipe(gulp.dest("./dist/www"));
|
||||
gulp.src(['./docs/site/*.svg'])
|
||||
.pipe(gulp.dest("./dist/www"));
|
||||
gulp.src(['./docs/site/*.ttf'])
|
||||
.pipe(gulp.dest("./dist/www"));
|
||||
gulp.src(['./docs/site/*.woff'])
|
||||
.pipe(gulp.dest("./dist/www"));
|
||||
gulp.src(['./docs/site/*.woff2'])
|
||||
.pipe(gulp.dest("./dist/www"));
|
||||
return gulp.src(['./docs/site/*.js'])
|
||||
.pipe(gulp.dest("./dist/www"));
|
||||
});
|
||||
Loading…
Reference in New Issue