STORM React Diagrams is a super simple, no-nonsense diagramming library written in React that just works. It is possible to use it in Scala. Here I will provide short instructions how to do that.

Dependencies

The code is based one the storm-react-diagrams wrapper for STORM React Diagrams component. It is written using scalajs-react library for ScalaJs.

Add dependencies in build.sbt:

libraryDependencies ++= Seq(
  "com.dbrsn.scalajs.react.components" %%% "storm-react-diagrams" % "0.3.1"
)
npmDependencies in Compile ++= Seq(
  "storm-react-diagrams" -> "5.2.1",
  "react" -> "16.7.0",
  "react-dom" -> "16.7.0"
)

Usage

Example of usage:

// 1) setup the diagram engine
val engine = new DiagramEngine()
engine.installDefaultFactories()

// 2) setup the diagram model
val model = new DiagramModel()

// 3) create a default node
val node1 = new DefaultNodeModel("Node 1", "rgb(0,192,255)")
val port1 = node1.addOutPort(s"Out")
node1.setPosition(pos1x, pos1y)

// 4) create another default node
val node2 = new DefaultNodeModel("Node 2", "rgb(192,255,0)")
val port2 = node2.addInPort(s"In")
node2.setPosition(pos2x, pos2y)

// 5) link the ports
val link1 = port1.link(port2)

// 6) add the models to the root graph
model.addAll(node1, node2, link1)

// 7) load model into engine
engine.setDiagramModel(model)

DiagramWidget(diagramEngine = engine)()

Don’t forget to add styles to your html:

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/storm-react-diagrams@5.2.1/dist/style.min.css" />

Source Code

Source code can be found here