Error when running the flowchart plugin

Issues
1

Info

  • Platform: macOS
  • Platform version: High Sierra 10.13.6
  • App Version: 3.23.1

Reproduce

Install the plugin:

➜  ~ ipm install flowchart
Installing flowchart to /Users/kork/Library/Application Support/inkdrop/packages ✓

Restart inkdrop. Then create a new note with these contents:

```flowchart
start=>end
```

Then on the preview side this error message appears:

Failed to render Markdown
The error thrown by a plugin: flowchart

TypeError: Cannot read property 'key' of null
    at getDisplaySymbol (/Users/kork/Library/Application Support/inkdrop/packages/flowchart/node_modules/flowchart.js/src/flowchart.parse.js:29:26)
    at constructChart (/Users/kork/Library/Application Support/inkdrop/packages/flowchart/node_modules/flowchart.js/src/flowchart.parse.js:63:24)
    at Object.drawSVG (/Users/kork/Library/Application Support/inkdrop/packages/flowchart/node_modules/flowchart.js/src/flowchart.parse.js:116:9)
    at Flowchart.renderDiagram (/Users/kork/Library/Application Support/inkdrop/packages/flowchart/lib/index.js:25:13)
    at Flowchart.componentDidMount (/Users/kork/Library/Application Support/inkdrop/packages/flowchart/lib/index.js:13:10)
    at CallbackQueue.notifyAll (/Applications/Inkdrop.app/Contents/Resources/app.asar/node_modules/react/lib/CallbackQueue.js:65:22)
    at ReactReconcileTransaction.close (/Applications/Inkdrop.app/Contents/Resources/app.asar/node_modules/react/lib/ReactReconcileTransaction.js:81:26)
    at ReactReconcileTransaction.closeAll (/Applications/Inkdrop.app/Contents/Resources/app.asar/node_modules/react/lib/Transaction.js:202:25)
    at ReactReconcileTransaction.perform (/Applications/Inkdrop.app/Contents/Resources/app.asar/node_modules/react/lib/Transaction.js:149:16)
    at ReactUpdatesFlushTransaction.perform (/Applications/Inkdrop.app/Contents/Resources/app.asar/node_modules/react/lib/Transaction.js:136:20)
    at ReactUpdatesFlushTransaction.perform (/Applications/Inkdrop.app/Contents/Resources/app.asar/node_modules/react/lib/ReactUpdates.js:86:38)
    at Object.flushBatchedUpdates (/Applications/Inkdrop.app/Contents/Resources/app.asar/node_modules/react/lib/ReactUpdates.js:147:19)
    at ReactDefaultBatchingStrategyTransaction.closeAll (/Applications/Inkdrop.app/Contents/Resources/app.asar/node_modules/react/lib/Transaction.js:202:25)
    at ReactDefaultBatchingStrategyTransaction.perform (/Applications/Inkdrop.app/Contents/Resources/app.asar/node_modules/react/lib/Transaction.js:149:16)
    at Object.batchedUpdates (/Applications/Inkdrop.app/Contents/Resources/app.asar/node_modules/react/lib/ReactDefaultBatchingStrategy.js:62:19)
    at Object.enqueueUpdate (/Applications/Inkdrop.app/Contents/Resources/app.asar/node_modules/react/lib/ReactUpdates.js:176:22)
    at enqueueUpdate (/Applications/Inkdrop.app/Contents/Resources/app.asar/node_modules/react/lib/ReactUpdateQueue.js:24:16)
    at Object.enqueueSetState (/Applications/Inkdrop.app/Contents/Resources/app.asar/node_modules/react/lib/ReactUpdateQueue.js:190:5)
    at Constructor.ReactComponent.setState (/Applications/Inkdrop.app/Contents/Resources/app.asar/node_modules/react/lib/ReactComponent.js:65:16)
    at Constructor.onChange (/Applications/Inkdrop.app/Contents/Resources/app.asar/node_modules/alt-utils/lib/connectToStores.js:101:14)
    at /Applications/Inkdrop.app/Contents/Resources/app.asar/node_modules/transmitter/dist/transmitter.js:34:50
    at Array.forEach (native)
    at Object.publish (/Applications/Inkdrop.app/Contents/Resources/app.asar/node_modules/transmitter/dist/transmitter.js:33:21)
    at emitChange (file:///Applications/Inkdrop.app/Contents/Resources/app.asar/browser-main.js:1:181055)
    at Object.dispatchToken.e.dispatcher.register.e [as ID_5] (file:///Applications/Inkdrop.app/Contents/Resources/app.asar/browser-main.js:1:181638)
    at Dispatcher._invokeCallback (/Applications/Inkdrop.app/Contents/Resources/app.asar/node_modules/flux/lib/Dispatcher.js:198:24)
    at Dispatcher.dispatch (/Applications/Inkdrop.app/Contents/Resources/app.asar/node_modules/flux/lib/Dispatcher.js:174:14)
    at batchingFunction (file:///Applications/Inkdrop.app/Contents/Resources/app.asar/browser-main.js:1:174395)
    at e.batchingFunction.e.batchingFunction.e [as batchingFunction] (file:///Applications/Inkdrop.app/Contents/Resources/app.asar/browser-main.js:1:173884)
    at e.dispatch (file:///Applications/Inkdrop.app/Contents/Resources/app.asar/browser-main.js:1:174083)
    at c (file:///Applications/Inkdrop.app/Contents/Resources/app.asar/browser-main.js:1:185429)
    at Object.u [as renderSuccess] (file:///Applications/Inkdrop.app/Contents/Resources/app.asar/browser-main.js:1:185562)
    at file:///Applications/Inkdrop.app/Contents/Resources/app.asar/browser-main.js:1:65011
    at <anonymous>
2

Hi derkork,

Thank you for reporting.
That’s an invalid flowchart.
You can reproduce it here: http://flowchart.js.org/
Please make sure if you write a correct flowchart like so:

st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
3

I see, my bad. Maybe in a future version this could be indicated by a somewhat more helpful error message maybe even with an indication on what exactly is wrong. This would improve usability of the plugin. I’ll go learn the proper syntax now :smiley:

4

Yeah, you are right.
I published v0.1.4 which will show you more friendly message like this:

28
Screen Shot 2018-11-13 at 11.03.28.png996×286 19.7 KB

Unfortunately flowchart.js doesn’t support describing which part of your code is incorrect.
Thanks!

5

That’s great, thank you very much :+1: