├── .gitignore
├── .media
    └── preview.png
├── .npmignore
├── .release-it.json
├── CHANGELOG.md
├── README.md
├── docs
    ├── .vuepress
    │   ├── config.js
    │   └── styles
    │   │   └── index.styl
    └── README.md
├── index.js
├── lib
    ├── FlowChart.vue
    ├── Loading.vue
    ├── client.js
    ├── markdownItPlugin.js
    └── presets
    │   ├── ant.js
    │   ├── base.js
    │   ├── index.js
    │   ├── pia.js
    │   └── vue.js
├── package.json
└── pnpm-lock.yaml


/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | .temp
3 | node_modules/
4 | 


--------------------------------------------------------------------------------
/.media/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ulivz/vuepress-plugin-flowchart/1e62af29d0651254231a16c35ff082243d7539f1/.media/preview.png


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | __tests__
2 | __mocks__


--------------------------------------------------------------------------------
/.release-it.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "src": {
 3 |     "tagName": "v%s",
 4 |     "commitMessage": "%s"
 5 |   },
 6 |   "increment": "conventional:angular",
 7 |   "beforeChangelogCommand": "conventional-changelog -p angular -i CHANGELOG.md -s",
 8 |   "changelogCommand": "conventional-changelog -p angular | tail -n +3",
 9 |   "safeBump": false
10 | }
11 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | <a name="1.4.3"></a>
 2 | ## [1.4.3](https://github.com/vuejs/vuepress/compare/v1.4.2...v1.4.3) (2018-11-19)
 3 | 
 4 | 
 5 | ### Bug Fixes
 6 | 
 7 | * compatible with IE11 ([1fbdf67](https://github.com/vuejs/vuepress/commit/1fbdf67))
 8 | 
 9 | 
10 | 
11 | <a name="1.4.2"></a>
12 | ## [1.4.2](https://github.com/vuejs/vuepress/compare/v1.4.1...v1.4.2) (2018-10-04)
13 | 
14 | 
15 | ### Bug Fixes
16 | 
17 | * add padding to component wrapper ([9d55c45](https://github.com/vuejs/vuepress/commit/9d55c45))
18 | 
19 | 
20 | 
21 | <a name="1.4.1"></a>
22 | ## [1.4.1](https://github.com/vuejs/vuepress/compare/v1.4.0...v1.4.1) (2018-10-04)
23 | 
24 | 
25 | 
26 | <a name="1.4.0"></a>
27 | # [1.4.0](https://github.com/vuejs/vuepress/compare/v1.3.0...v1.4.0) (2018-10-04)
28 | 
29 | 
30 | ### Features
31 | 
32 | * preset & ant preset ([50cab5d](https://github.com/vuejs/vuepress/commit/50cab5d))
33 | 
34 | 
35 | 
36 | <a name="1.3.0"></a>
37 | # [1.3.0](https://github.com/vuejs/vuepress/compare/v1.2.0...v1.3.0) (2018-10-03)
38 | 
39 | 
40 | ### Bug Fixes
41 | 
42 | * naming case ([c05a975](https://github.com/vuejs/vuepress/commit/c05a975))
43 | 
44 | 
45 | ### Features
46 | 
47 | * auto svg height ([852f23a](https://github.com/vuejs/vuepress/commit/852f23a))
48 | 
49 | 
50 | 
51 | <a name="1.2.0"></a>
52 | # [1.2.0](https://github.com/vuejs/vuepress/compare/v1.1.0...v1.2.0) (2018-10-03)
53 | 
54 | 
55 | ### Features
56 | 
57 | * loading ([8d67dbd](https://github.com/vuejs/vuepress/commit/8d67dbd))
58 | 
59 | 
60 | 
61 | <a name="1.1.0"></a>
62 | # 1.1.0 (2018-10-03)
63 | 
64 | 
65 | ### Bug Fixes
66 | 
67 | * dynamic id won't update ([8268760](https://github.com/vuejs/vuepress/commit/8268760))
68 | 
69 | 
70 | ### Features
71 | 
72 | * refine implementation ([f433db1](https://github.com/vuejs/vuepress/commit/f433db1))
73 | 
74 | 
75 | 
76 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">vuepress-plugin-flowchart</h1>
 2 | 
 3 | <p align="center">
 4 | <a href="https://npmjs.com/package/vuepress-plugin-flowchart"><img src="https://img.shields.io/npm/v/vuepress-plugin-flowchart.svg?style=flat" alt="NPM version"></a> <a href="https://npmjs.com/package/vuepress-plugin-flowchart"><img src="https://img.shields.io/npm/dm/vuepress-plugin-flowchart.svg?style=flat" alt="NPM downloads"></a> <a href="https://github.com/ulivz/donate"><img src="https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&amp;style=flat" alt="donate"></a>
 5 | </p>
 6 | 
 7 | <p align="center">
 8 |   <img src="https://github.com/ulivz/vuepress-plugin-flowchart/blob/master/.media/preview.png?raw=true" alt="preview">
 9 | </p>
10 | 
11 | ## Features
12 | 
13 | - Rapid flowchart development.
14 | - Content loading.
15 | - Out-of-the-box styling preset (Currently support `vue`、`ant`).
16 | 
17 | Check out the full [documentation](https://vuepress-plugin-flowchart.vercel.app/).
18 | 
19 | ## Contributing
20 | 
21 | 1. Fork it!
22 | 2. Create your feature branch: `git checkout -b my-new-feature`
23 | 3. Commit your changes: `git commit -am 'Add some feature'`
24 | 4. Push to the branch: `git push origin my-new-feature`
25 | 5. Submit a pull request :D
26 | 
27 | ## Author
28 | 
29 | **vuepress-plugin-flowchart** © [ulivz](https://github.com/ULIVZ), Released under the [MIT](./LICENSE) License.<br>
30 | Authored and maintained by ulivz with help from contributors ([list](https://github.com/ULIVZ/vuepress-plugin-flowchart/contributors)).
31 | 
32 | > [github.com/ulivz](https://github.com/ulivz) · GitHub [@ulivz](https://github.com/ULIVZ) · Twitter [@_ulivz](https://twitter.com/_ulivz)
33 | 


--------------------------------------------------------------------------------
/docs/.vuepress/config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   title: 'vuepress-plugin-flowchart',
 3 | 
 4 |   description: "Rapid flowchart development plugin for vuepress",
 5 | 
 6 |   head: [
 7 |     ['meta', { name: 'theme-color', content: '#3eaf7c' }],
 8 |     ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
 9 |     ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }]
10 |   ],
11 | 
12 |   themeConfig: {
13 |     repo: "ulivz/vuepress-plugin-flowchart",
14 |     editLinks: true,
15 |     docsDir: 'docs',
16 |     editLinkText: 'Edit this page on GitHub',
17 |     lastUpdated: 'Last Updated'
18 |   },
19 | 
20 |   plugins: [
21 |     require('../../index'),
22 |     [
23 |       '@vuepress/pwa', {
24 |       serviceWorker: true,
25 |       updatePopup: {
26 |         message: "New content is available.",
27 |         buttonText: "Refresh"
28 |       }
29 |     }]
30 |   ]
31 | }


--------------------------------------------------------------------------------
/docs/.vuepress/styles/index.styl:
--------------------------------------------------------------------------------
1 | @media (max-width: $MQNarrow)
2 |   .site-name
3 |     font-size 1rem!important
4 | 
5 | 


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | sidebar: auto
  3 | ---
  4 | 
  5 | @flowstart
  6 | st=>start: Start:>http://www.google.com[blank]
  7 | e=>end:>http://www.google.com
  8 | op1=>operation: My Operation
  9 | sub1=>subroutine: My Subroutine
 10 | cond=>condition: Yes
 11 | or No?:>http://www.google.com
 12 | io=>inputoutput: catch something...
 13 | para=>parallel: parallel tasks
 14 | 
 15 | st->op1->cond
 16 | cond(yes)->io->e
 17 | cond(no)->para
 18 | para(path1, bottom)->sub1(right)->op1
 19 | para(path2, top)->op1
 20 | @flowend
 21 | 
 22 | ## Install
 23 | 
 24 | ::: warning Note 
 25 | This plugin requires VuePress >= 1.0.0, for now you can try it via `yarn add vuepress@next -D`
 26 | :::
 27 | 
 28 | ```bash
 29 | yarn add vuepress-plugin-flowchart -D
 30 | ```
 31 | 
 32 | ## Usage
 33 | 
 34 | ```js
 35 | // .vuepress/config.js
 36 | module.exports = {
 37 |   plugins: [
 38 |     'flowchart'
 39 |   ]
 40 | }
 41 | ```
 42 | 
 43 | ## Syntax
 44 | 
 45 | ```markdown
 46 | @flowstart [preset]
 47 | 
 48 | <!-- Your flowchart code here. -->
 49 | 
 50 | @flowend
 51 | ```
 52 | 
 53 | `vuepress-plugin-flowchart` leverages [flowchart.js](https://github.com/adrai/flowchart.js) under the hood.
 54 | 
 55 | Available presets for now:
 56 | 
 57 | - `vue` (default)
 58 | - `ant`
 59 | 
 60 | View the current available preset [here](https://github.com/ulivz/vuepress-plugin-flowchart/tree/master/lib/presets), feel free to submit your own preset. : )
 61 | 
 62 | ### Start & End
 63 | 
 64 | - `[Variable]=>start: [Text]`
 65 | - `[Variable]=>end: [Text]`
 66 | 
 67 | ```markdown
 68 | @flowstart
 69 | st=>start: Start
 70 | e=>end: End
 71 | 
 72 | st->e
 73 | @flowend
 74 | ```
 75 | 
 76 | @flowstart
 77 | st=>start: Start
 78 | e=>end: End
 79 | 
 80 | st->e
 81 | @flowend
 82 | 
 83 | ### Operation
 84 | 
 85 | - `[Variable]=>operation: [Text]`
 86 | 
 87 | ```markdown
 88 | @flowstart
 89 | process=>operation: Operation
 90 | e=>end: End
 91 | 
 92 | process->e
 93 | @flowend
 94 | ```
 95 | 
 96 | @flowstart
 97 | process=>operation: Operation
 98 | e=>end: End
 99 | 
100 | process->e
101 | @flowend
102 | 
103 | 
104 | ### Inputoutput
105 | 
106 | - `[Variable]=>inputoutput: [Text]`
107 | 
108 | ```markdown
109 | @flowstart
110 | process=>inputoutput: Inputoutput
111 | e=>end: End
112 | 
113 | process->e
114 | @flowend
115 | ```
116 | 
117 | @flowstart
118 | process=>inputoutput: Inputoutput
119 | e=>end: End
120 | 
121 | process->e
122 | @flowend
123 | 
124 | 
125 | ### Subroutine
126 | 
127 | - `[Variable]=>subroutine: [Text]`
128 | 
129 | ```markdown
130 | @flowstart
131 | process=>subroutine: Subroutine
132 | e=>end: End
133 | 
134 | process->e
135 | @flowend
136 | ```
137 | 
138 | @flowstart
139 | process=>subroutine: Subroutine
140 | e=>end: End
141 | 
142 | process->e
143 | @flowend
144 | 
145 | 
146 | ### Condition
147 | 
148 | - `[Variable]=>condition: [Text]`
149 | - `[Variable]([yesText])->[Position]`
150 | - `[Variable]([noText])->[Position]`
151 | 
152 | ```markdown
153 | @flowstart
154 | cond=>condition: Process?
155 | process=>operation: Process
156 | e=>end: End
157 | 
158 | cond(yes)->process->e
159 | cond(no)->e
160 | @flowend
161 | ```
162 | 
163 | @flowstart
164 | cond=>condition: Process?
165 | process=>operation: Process
166 | e=>end: End
167 | 
168 | cond(yes)->process->e
169 | cond(no)->e
170 | @flowend
171 | 
172 | 
173 | ### Parallel
174 | 
175 | - `[Variable]=>parallel: [Text]`
176 | - `[Variable](path1, direction)->[Position]`
177 | - `[Variable](path1, direction)->[Position]`
178 | 
179 | ```markdown
180 | @flowstart
181 | para=>parallel: parallel tasks
182 | process=>operation: Process
183 | e=>end: End
184 | 
185 | para(path1, bottom)->process->e
186 | para(path2)->e
187 | @flowend
188 | ```
189 | 
190 | @flowstart
191 | para=>parallel: parallel tasks
192 | process=>operation: Process
193 | e=>end: End
194 | 
195 | para(path1, bottom)->process->e
196 | para(path2)->e
197 | @flowend
198 | 
199 | ## Showcase
200 | 
201 | ### #1 Ordinary process
202 | 
203 | ```md
204 | @flowstart
205 | stage1=>operation: Stage 1
206 | stage2=>operation: Stage 2
207 | stage3=>operation: Stage 3
208 | 
209 | stage1->stage2->stage3
210 | @flowend
211 | ```
212 | 
213 | @flowstart
214 | stage1=>operation: Stage 1
215 | stage2=>operation: Stage 2
216 | stage3=>operation: Stage 3
217 | 
218 | stage1->stage2->stage3
219 | @flowend
220 | 
221 | ### #2 Complex process
222 | 
223 | ```md
224 | @flowstart
225 | st=>start: Start|past:>http://www.google.com[blank]
226 | e=>end: End|future:>http://www.google.com
227 | op1=>operation: My Operation|past
228 | op2=>operation: Stuff|current
229 | sub1=>subroutine: My Subroutine|invalid
230 | cond=>condition: Yes
231 | or No?|approved:>http://www.google.com
232 | c2=>condition: Good idea|rejected
233 | io=>inputoutput: catch something...|future
234 | 
235 | st->op1(right)->cond
236 | cond(yes, right)->c2
237 | cond(no)->sub1(left)->op1
238 | c2(yes)->io->e
239 | c2(no)->op2->e
240 | @flowend
241 | ```
242 | 
243 | @flowstart
244 | st=>start: Start|past:>http://www.google.com[blank]
245 | e=>end: End|future:>http://www.google.com
246 | op1=>operation: My Operation|past
247 | op2=>operation: Stuff|current
248 | sub1=>subroutine: My Subroutine|invalid
249 | cond=>condition: Yes
250 | or No?|approved:>http://www.google.com
251 | c2=>condition: Good idea|rejected
252 | io=>inputoutput: catch something...|future
253 | 
254 | st->op1(right)->cond
255 | cond(yes, right)->c2
256 | cond(no)->sub1(left)->op1
257 | c2(yes)->io->e
258 | c2(no)->op2->e
259 | @flowend
260 | 
261 | ### #3 Ant Preset
262 | 
263 | ```markdown
264 | @flowstart ant
265 | st=>start: Start:>http://www.google.com[blank]
266 | e=>end:>http://www.google.com
267 | op1=>operation: My Operation
268 | sub1=>subroutine: My Subroutine
269 | cond=>condition: Yes
270 | or No?:>http://www.google.com
271 | io=>inputoutput: catch something...
272 | para=>parallel: parallel tasks
273 | 
274 | st->op1->cond
275 | cond(yes)->io->e
276 | cond(no)->para
277 | para(path1, bottom)->sub1(right)->op1
278 | para(path2, top)->op1
279 | @flowend
280 | ```
281 | 
282 | @flowstart ant
283 | st=>start: Start:>http://www.google.com[blank]
284 | e=>end:>http://www.google.com
285 | op1=>operation: My Operation
286 | sub1=>subroutine: My Subroutine
287 | cond=>condition: Yes
288 | or No?:>http://www.google.com
289 | io=>inputoutput: catch something...
290 | para=>parallel: parallel tasks
291 | 
292 | st->op1->cond
293 | cond(yes)->io->e
294 | cond(no)->para
295 | para(path1, bottom)->sub1(right)->op1
296 | para(path2, top)->op1
297 | @flowend
298 | 
299 | 
300 | ### #4 PIA Preset
301 | 
302 | ```markdown
303 | @flowstart pia
304 | st=>start: Start:>http://www.google.com[blank]
305 | e=>end:>http://www.google.com
306 | op1=>operation: My Operation
307 | sub1=>subroutine: My Subroutine
308 | cond=>condition: Yes
309 | or No?:>http://www.google.com
310 | io=>inputoutput: catch something...
311 | para=>parallel: parallel tasks
312 | 
313 | st->op1->cond
314 | cond(yes)->io->e
315 | cond(no)->para
316 | para(path1, bottom)->sub1(right)->op1
317 | para(path2, top)->op1
318 | @flowend
319 | ```
320 | 
321 | @flowstart pia
322 | st=>start: Start:>http://www.google.com[blank]
323 | e=>end:>http://www.google.com
324 | op1=>operation: My Operation
325 | sub1=>subroutine: My Subroutine
326 | cond=>condition: Yes
327 | or No?:>http://www.google.com
328 | io=>inputoutput: catch something...
329 | para=>parallel: parallel tasks
330 | 
331 | st->op1->cond
332 | cond(yes)->io->e
333 | cond(no)->para
334 | para(path1, bottom)->sub1(right)->op1
335 | para(path2, top)->op1
336 | @flowend
337 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | 
 3 | module.exports = {
 4 |   // component: './flowcharts.vue'
 5 |   enhanceAppFiles: [
 6 |     path.resolve(__dirname, './lib/client.js')
 7 |   ],
 8 | 
 9 |   chainMarkdown (config) {
10 |     config
11 |       .plugin('flowchart')
12 |       .use(require('./lib/markdownItPlugin'))
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/lib/FlowChart.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     :class="{ 'loading': loading, [preset]: preset }"
 4 |     class="vuepress-flowchart"
 5 |   >
 6 |     <Loading
 7 |       class="vuepress-flowchart-loading-icon"
 8 |       v-if="loading"
 9 |     />
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 |   import Loading from './Loading'
15 |   import presets from './presets/index'
16 | 
17 |   export default {
18 |   name: 'flowchart',
19 | 
20 |   components: {
21 |     Loading
22 |   },
23 | 
24 |   props: {
25 |     id: {
26 |       type: String,
27 |       required: true
28 |     },
29 |     code: {
30 |       type: String,
31 |       required: true
32 |     },
33 |     preset: {
34 |       type: String,
35 |       default: 'vue'
36 |     }
37 |   },
38 | 
39 |   data () {
40 |     return {
41 |       loading: true,
42 |     }
43 |   },
44 | 
45 |   mounted () {
46 |     const preset = presets[this.preset]
47 |     if (!preset) {
48 |       console.warn(`[vuepress-plugin-flowchart] Unknown preset: ${this.preset}`)
49 |       return
50 |     }
51 | 
52 |     const code = this.code
53 |     this.$el.setAttribute('id', this.id)
54 |     const delay = () => new Promise(resolve => setTimeout(resolve, 500))
55 |     Promise.all([
56 |       import(/* webpackChunkName: "flowchart" */ 'flowchart.js'),
57 |       delay(),
58 |     ]).then(([flowchart]) => {
59 |       const { parse } = flowchart.default
60 |       const svg = parse(code)
61 |       svg.drawSVG(this.id, preset)
62 |       this.loading = false
63 |     })
64 |   }
65 | }
66 | </script>
67 | 
68 | <style lang="stylus">
69 | .vuepress-flowchart
70 |   overflow scroll
71 |   text-align center
72 |   font-size 0px
73 |   min-height 200px
74 |   display flex
75 |   justify-content center
76 |   align-items center
77 |   transition all 1s
78 |   padding 10px
79 |   & > svg
80 |     max-width 100%
81 |     height auto
82 |   &.loading
83 |     background-color #f3f6f8
84 | 
85 | .vuepress-flowchart
86 |   &.vue
87 |     .start-element, .end-element, .operation-element, .parallel-element
88 |       rx 5px
89 |       ry 5px
90 | 
91 | .vuepress-flowchart-loading-icon
92 |   width 40px
93 |   height 40px
94 |   fill #3eaf7c
95 | </style>
96 | 


--------------------------------------------------------------------------------
/lib/Loading.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
 3 | viewBox="0 0 30 30" style="enable-background:new 0 0 50 50;">
 4 |   <rect x="0" y="13" width="4" height="5" >
 5 |     <animate attributeName="height" attributeType="XML"
 6 |       values="5;21;5"
 7 |       begin="0s" dur="0.6s" repeatCount="indefinite" />
 8 |     <animate attributeName="y" attributeType="XML"
 9 |       values="13; 5; 13"
10 |       begin="0s" dur="0.6s" repeatCount="indefinite" />
11 |   </rect>
12 |   <rect x="10" y="13" width="4" height="5" >
13 |     <animate attributeName="height" attributeType="XML"
14 |       values="5;21;5"
15 |       begin="0.15s" dur="0.6s" repeatCount="indefinite" />
16 |     <animate attributeName="y" attributeType="XML"
17 |       values="13; 5; 13"
18 |       begin="0.15s" dur="0.6s" repeatCount="indefinite" />
19 |   </rect>
20 |   <rect x="20" y="13" width="4" height="5">
21 |     <animate attributeName="height" attributeType="XML"
22 |       values="5;21;5"
23 |       begin="0.3s" dur="0.6s" repeatCount="indefinite" />
24 |     <animate attributeName="y" attributeType="XML"
25 |       values="13; 5; 13"
26 |       begin="0.3s" dur="0.6s" repeatCount="indefinite" />
27 |   </rect>
28 | </svg>
29 | </template>


--------------------------------------------------------------------------------
/lib/client.js:
--------------------------------------------------------------------------------
1 | import FlowChart from './FlowChart'
2 | 
3 | export default function (ctx) {
4 |   const { Vue } = ctx
5 |   Vue.component('FlowChart', FlowChart)
6 | }
7 | 


--------------------------------------------------------------------------------
/lib/markdownItPlugin.js:
--------------------------------------------------------------------------------
  1 | const { hash } = require('@vuepress/shared-utils')
  2 | 
  3 | module.exports = function flowchartPlugin (md, options = {}) {
  4 |   options = options || {}
  5 | 
  6 |   const openMarker = options.openMarker || '@flowstart'
  7 |   const openChar = openMarker.charCodeAt(0)
  8 |   const closeMarker = options.closeMarker || '@flowend'
  9 |   const closeChar = closeMarker.charCodeAt(0)
 10 | 
 11 |   function render (tokens, idx, options, env, self) {
 12 |     const token = tokens[idx]
 13 |     const key = `flowchart_${hash(idx)}`
 14 |     const { content, info } = token
 15 |     md.$dataBlock[key] = content
 16 |     return `<FlowChart id="${key}" :code="$dataBlock.${key}" preset="${info.trim() || 'vue'}"></FlowChart>`
 17 |   }
 18 | 
 19 |   function uml (state, startLine, endLine, silent) {
 20 |     let nextLine
 21 |     let i
 22 |     let autoClosed = false
 23 |     let start = state.bMarks[startLine] + state.tShift[startLine]
 24 |     let max = state.eMarks[startLine]
 25 | 
 26 |     // Check out the first character quickly,
 27 |     // this should filter out most of non-uml blocks
 28 |     if (openChar !== state.src.charCodeAt(start)) {
 29 |       return false
 30 |     }
 31 | 
 32 |     // Check out the rest of the marker string
 33 |     for (i = 0; i < openMarker.length; ++i) {
 34 |       if (openMarker[i] !== state.src[start + i]) {
 35 |         return false
 36 |       }
 37 |     }
 38 | 
 39 |     const markup = state.src.slice(start, start + i)
 40 |     const params = state.src.slice(start + i, max)
 41 | 
 42 |     // Since start is found, we can report success here in validation mode
 43 |     if (silent) {
 44 |       return true
 45 |     }
 46 | 
 47 |     // Search for the end of the block
 48 |     nextLine = startLine
 49 | 
 50 |     for (; ;) {
 51 |       nextLine++
 52 |       if (nextLine >= endLine) {
 53 |         // unclosed block should be autoclosed by end of document.
 54 |         // also block seems to be autoclosed by end of parent
 55 |         break
 56 |       }
 57 | 
 58 |       start = state.bMarks[nextLine] + state.tShift[nextLine]
 59 |       max = state.eMarks[nextLine]
 60 | 
 61 |       if (start < max && state.sCount[nextLine] < state.blkIndent) {
 62 |         // non-empty line with negative indent should stop the list:
 63 |         // - ```
 64 |         //  test
 65 |         break
 66 |       }
 67 | 
 68 |       if (closeChar !== state.src.charCodeAt(start)) {
 69 |         // didn't find the closing fence
 70 |         continue
 71 |       }
 72 | 
 73 |       if (state.sCount[nextLine] > state.sCount[startLine]) {
 74 |         // closing fence should not be indented with respect of opening fence
 75 |         continue
 76 |       }
 77 | 
 78 |       let closeMarkerMatched = true
 79 |       for (i = 0; i < closeMarker.length; ++i) {
 80 |         if (closeMarker[i] !== state.src[start + i]) {
 81 |           closeMarkerMatched = false
 82 |           break
 83 |         }
 84 |       }
 85 | 
 86 |       if (!closeMarkerMatched) {
 87 |         continue
 88 |       }
 89 | 
 90 |       // make sure tail has spaces only
 91 |       if (state.skipSpaces(start + i) < max) {
 92 |         continue
 93 |       }
 94 | 
 95 |       // found!
 96 |       autoClosed = true
 97 |       break
 98 |     }
 99 | 
100 |     const contents = state.src
101 |       .split('\n')
102 |       .slice(startLine + 1, nextLine)
103 |       .join('\n')
104 | 
105 |     const token = state.push('flowchart', 'fence', 0)
106 |     token.block = true
107 |     token.info = params
108 |     token.content = contents
109 |     token.map = [startLine, nextLine]
110 |     token.markup = markup
111 | 
112 |     state.line = nextLine + (autoClosed ? 1 : 0)
113 | 
114 |     return true
115 |   }
116 | 
117 |   md.block.ruler.before('fence', 'flowchart', uml, {
118 |     alt: ['paragraph', 'reference', 'blockquote', 'list']
119 |   })
120 | 
121 |   md.renderer.rules.flowchart = render
122 | }
123 | 


--------------------------------------------------------------------------------
/lib/presets/ant.js:
--------------------------------------------------------------------------------
 1 | import base from './base'
 2 | 
 3 | export default Object.assign({}, base, {
 4 |   // style symbol types
 5 |   'symbols': {
 6 |     start: {
 7 |       'class': 'start-element',
 8 |       'font-color': 'white',
 9 |       'fill': '#595959',
10 |       'line-width': '0px'
11 |     },
12 |     end: {
13 |       'class': 'end-element',
14 |       'font-color': 'white',
15 |       'fill': '#595959',
16 |       'line-width': '0px'
17 |     },
18 |     operation: {
19 |       'class': 'operation-element',
20 |       'font-color': 'white',
21 |       'fill': '#1890ff',
22 |       'line-width': '0px'
23 |     },
24 |     inputoutput: {
25 |       'class': 'inputoutput-element',
26 |       'font-color': 'white',
27 |       'fill': '#1890ff',
28 |       'line-width': '0px'
29 |     },
30 |     subroutine: {
31 |       'class': 'subroutine-element',
32 |       'font-color': 'white',
33 |       'fill': '#FF485E',
34 |       'element-color': '#fff',
35 |       'line-color': 'red'
36 |     },
37 |     condition: {
38 |       'class': 'condition-element',
39 |       'font-color': 'white',
40 |       'fill': '#FF485E',
41 |       'line-width': '0px'
42 |     },
43 |     parallel: {
44 |       'class': 'parallel-element',
45 |       'font-color': 'white',
46 |       'fill': '#1890ff',
47 |       'line-width': '0px'
48 |     }
49 |   }
50 | })
51 | 


--------------------------------------------------------------------------------
/lib/presets/base.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   'x': 0,
 3 |   'y': 0,
 4 |   'line-width': 2,
 5 |   'line-length': 50,
 6 |   'text-margin': 10,
 7 |   'font-size': 14,
 8 |   'font-color': '#8DA1AC',
 9 |   'line-color': '#8DA1AC',
10 |   'element-color': 'black',
11 |   'fill': 'white',
12 |   'yes-text': 'yes',
13 |   'no-text': 'no',
14 |   'arrow-end': 'block',
15 |   'scale': 1
16 | }
17 | 


--------------------------------------------------------------------------------
/lib/presets/index.js:
--------------------------------------------------------------------------------
 1 | import ant from './ant'
 2 | import vue from './vue'
 3 | import pia from './pia'
 4 | 
 5 | export default {
 6 |   ant,
 7 |   vue,
 8 |   pia,
 9 | }
10 | 


--------------------------------------------------------------------------------
/lib/presets/pia.js:
--------------------------------------------------------------------------------
 1 | import base from './base'
 2 | 
 3 | export default Object.assign({}, base, {
 4 |   // style symbol types
 5 |   'line-width': 1,
 6 |   'symbols': {
 7 |     start: {
 8 |       'class': 'start-element',
 9 |       'fill': '#ccc',
10 |       'line-width': '1px',
11 |       'line-color': '#5c6ac4',
12 |       'font-color': '#000',
13 |     },
14 |     end: {
15 |       'class': 'end-element',
16 |       'fill': '#ccc',
17 |       'line-width': '1px',
18 |       'line-color': '#5c6ac4',
19 |       'font-color': '#000',
20 |     },
21 |     operation: {
22 |       'class': 'operation-element',
23 |       'font-color': 'white',
24 |       'fill': '#f1f1f1',
25 |       'line-width': '1px',
26 |       'line-color': '#5c6ac4',
27 |       'font-color': '#000',
28 |     },
29 |     inputoutput: {
30 |       'class': 'inputoutput-element',
31 |       'font-color': 'white',
32 |       'fill': '#f1f1f1',
33 |       'line-width': '1px',
34 |       'line-color': '#5c6ac4',
35 |       'font-color': '#000',
36 |     },
37 |     subroutine: {
38 |       'class': 'subroutine-element',
39 |       'font-color': 'white',
40 |       'fill': '#f1f1f1',
41 |       'line-width': '1px',
42 |       'line-color': '#5c6ac4',
43 |       'font-color': '#000',
44 |     },
45 |     condition: {
46 |       'class': 'condition-element',
47 |       'font-color': 'white',
48 |       'fill': '#f1f1f1',
49 |       'line-width': '1px',
50 |       'line-color': '#5c6ac4',
51 |       'font-color': '#000',
52 |     },
53 |     parallel: {
54 |       'class': 'parallel-element',
55 |       'font-color': 'white',
56 |       'fill': '#f1f1f1',
57 |       'line-width': '1px',
58 |       'line-color': '#5c6ac4',
59 |       'font-color': '#000',
60 |     }
61 |   }
62 | })
63 | 


--------------------------------------------------------------------------------
/lib/presets/vue.js:
--------------------------------------------------------------------------------
 1 | import base from './base'
 2 | 
 3 | export default Object.assign({}, base, {
 4 |   // style symbol types
 5 |   'symbols': {
 6 |     start: {
 7 |       'class': 'start-element',
 8 |       'font-color': 'white',
 9 |       'fill': '#2F495F',
10 |       'line-width': '0px',
11 |       'rx': '10px',
12 |       'ry': '10px'
13 |     },
14 |     end: {
15 |       'class': 'end-element',
16 |       'font-color': 'white',
17 |       'fill': '#2F495F',
18 |       'line-width': '0px'
19 |     },
20 |     operation: {
21 |       'class': 'operation-element',
22 |       'font-color': 'white',
23 |       'fill': '#00BC7D',
24 |       'line-width': '0px'
25 |     },
26 |     inputoutput: {
27 |       'class': 'inputoutput-element',
28 |       'font-color': 'white',
29 |       'fill': '#EB4D5D',
30 |       'line-width': '0px'
31 |     },
32 |     subroutine: {
33 |       'class': 'subroutine-element',
34 |       'font-color': 'white',
35 |       'fill': '#937AC4',
36 |       'element-color': '#fff',
37 |       'line-color': 'red'
38 |     },
39 |     condition: {
40 |       'class': 'condition-element',
41 |       'font-color': 'white',
42 |       'fill': '#FFB500',
43 |       'line-width': '0px'
44 |     },
45 |     parallel: {
46 |       'class': 'parallel-element',
47 |       'font-color': 'white',
48 |       'fill': '#2F495F',
49 |       'line-width': '0px'
50 |     }
51 |   }
52 | })
53 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vuepress-plugin-flowchart",
 3 |   "version": "1.4.3",
 4 |   "description": "Rapid flowchart development plugin for vuepress",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "NODE_OPTIONS=--openssl-legacy-provider vuepress dev docs --temp .temp",
 8 |     "build": "NODE_OPTIONS=--openssl-legacy-provider vuepress build docs",
 9 |     "release": "release-it"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/vuejs/vuepress.git"
14 |   },
15 |   "keywords": [
16 |     "documentation",
17 |     "vue",
18 |     "vuepress",
19 |     "generator"
20 |   ],
21 |   "dependencies": {
22 |     "flowchart.js": "^1.11.3"
23 |   },
24 |   "author": "ULIVZ <chl814@foxmail.com>",
25 |   "license": "MIT",
26 |   "bugs": {
27 |     "url": "https://github.com/ulivz/vuepress-plugin-flowchart"
28 |   },
29 |   "homepage": "https://flowchart.vuepress.ulivz.com",
30 |   "devDependencies": {
31 |     "vuepress": "^1.0.0-alpha.35",
32 |     "@vuepress/plugin-pwa": "^1.0.0-alpha.35",
33 |     "release-it": "v7.4.8",
34 |     "conventional-changelog-cli": "^2.0.1"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------