React-diagrams: Diagram doesn't seem

[mustafakucuk]

Hi,

My codes are as follows but nothing doesn't seem.

import React from 'react';
import {
    DiagramEngine,
    DiagramModel,
    DiagramProps,
    DefaultNodeModel,
    LinkModel,
    DiagramWidget
} from "storm-react-diagrams";

require("storm-react-diagrams/dist/style.min.css");


function App() {

    const engine = new DiagramEngine();
    engine.installDefaultFactories();
    const model = new DiagramModel();

    var node1 = new DefaultNodeModel("Node 1", "rgb(0,192,255)");
    let port1 = node1.addOutPort("Out");
    node1.setPosition(100, 100);
    var node2 = new DefaultNodeModel("Node 2", "rgb(192,255,0)");
    let port2 = node2.addInPort("In");
    node2.setPosition(400, 100);
    let link1 = port1.link(port2);
    link1.setColor('black');
    model.addAll(node1, node2, link1);
    var node3 = new DefaultNodeModel("Node 3", "rgb(192,255,0)");
    node3.addInPort("In");
    node3.addOutPort("out");
    model.addAll(node3);
  engine.setDiagramModel(model);

  return <DiagramWidget diagramEngine={engine}/>;

}

export default App;

Thanks.

[giabao2105]

I have the same problem too, it render nothing

[JokerNN]

Can you elaborate? Are there any errors in console? If it's the only code that you have, then you need to connect your App to DOM as well.

[dannyb648]

I'm having the same issue with

`

import React from 'react';
import './App.css';
import * as SRD from "storm-react-diagrams"
require("storm-react-diagrams/dist/style.min.css")

function App() {
var engine = new SRD.DiagramEngine();
engine.installDefaultFactories();

// 2) setup the diagram model
var model = new SRD.DiagramModel();

// 3) create a default node
var node1 = new SRD.DefaultNodeModel("Node 1", "rgb(0,192,255)");
let port1 = node1.addOutPort("Out");
node1.setPosition(100, 100);

// 4) create another default node
var node2 = new SRD.DefaultNodeModel("Node 2", "rgb(192,255,0)");
let port2 = node2.addInPort("In");
node2.setPosition(400, 100);

// 5) link the ports
let 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);

console.log(engine)

return (

);
}

export default App;

`

[mustafakucuk]

@JokerNN doesn't seem any error on console.

[Arkanayan]

You have to set height, width, backgroundColor of the parent dom element. see this https://stackoverflow.com/questions/49513323/react-diagrams-invisible

Verify if the elements are present or not in the react developer panel.

[dannyb648]

So setting this in my app.css worked.

.srd-diagram { height: 80vh; background-color: aliceblue; width: 90%; }

[mustafakucuk]

@Arkanayan @dannyb648 thanks it's worked 👍