How to Setup Our Own Sendgrid, Mailgun or Postmark like SMTP Server

How to update flowchart.js diagram output instead of adding new one - R Shiny

Prashant

I am learning flowchart.js and trying to integrate it with R Shiny application.

My question is how do I get the output diagram from flowchart.js got updated instead of added new diagram everytime I send new code to the javascript function? I tried to look up the manual & document but couldn't find any and my level of javascript is not that good to fully understand the flowchart.js source.

Below is my javascript, Shiny app, and the code file of flowchart.js

draw_flow_chart.js

The draw_flow function will be trigger when Shiny server side send-data to client.

var diagram;
var draw_flow = function(input) {
  diagram = flowchart.parse(input)
  diagram.drawSVG('column_descrption');
}

ui.R

# linebreaks function for easily adding linebreaks
linebreaks <- function(n){HTML(strrep(br(), n))}

ui <- fluidPage(
  tags$head(includeScript("https://d3js.org/d3.v4.min.js")),
  tags$head(includeScript("http://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js")),
  tags$head(includeScript("https://flowchart.js.org/flowchart-latest.js")),
  tags$script(src = "draw_flow_chart.js"),
  actionButton("draw_graph", "Test graph"),
  actionButton("draw_another_graph", "Test another graph"),
  tags$script(
    "Shiny.addCustomMessageHandler(
      type = 'send-data', function(data) {
        draw_flow(data)
    });"
  )
  div(id = "column_descrption")
)

server.R

server <- function(input, output, session) {
  observeEvent(input$draw_graph, {
    session$sendCustomMessage(
      type = "send-data", message = read_file("www/sample_flow.txt")
    )
  })
  observeEvent(input$draw_another_graph, {
    session$sendCustomMessage(
      type = "send-data", message = read_file("www/another_sample_flow.txt")
    )
  })
}

The code file

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...
para=>parallel: parallel tasks

st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1

st=>start: Improve your
l10n process!
  e=>end: Continue to have fun!:>https://youtu.be/YQryHo1iHb8[blank]
op1=>operation: Go to locize.com:>https://locize.com[blank]
sub1=>subroutine: Read the awesomeness
cond(align-next=no)=>condition: Interested to
getting started?
  io=>inputoutput: Register:>https://www.locize.app/register[blank]
sub2=>subroutine: Read about improving
your localization workflow
or another source:>https://medium.com/@adrai/8-signs-you-should-improve-your-localization-process-3dc075d53998[blank]
op2=>operation: Login:>https://www.locize.app/login[blank]
cond2=>condition: valid password?
  cond3=>condition: reset password?
  op3=>operation: send email
sub3=>subroutine: Create a demo project
sub4=>subroutine: Start your real project
io2=>inputoutput: Subscribe

st->op1->sub1->cond
cond(yes)->io->op2->cond2
cond2(no)->cond3
cond3(no,bottom)->op2
cond3(yes)->op3
op3(right)->op2
cond2(yes)->sub3
sub3->sub4->io2->e
cond(no)->sub2(right)->op1

st@>op1({"stroke":"Red"})@>sub1({"stroke":"Red"})@>cond({"stroke":"Red"})@>io({"stroke":"Red"})@>op2({"stroke":"Red"})@>cond2({"stroke":"Red"})@>sub3({"stroke":"Red"})@>sub4({"stroke":"Red"})@>io2({"stroke":"Red"})@>e({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})