Diagram doesn't seem

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.

[dannyb648]

So setting this in my app.css worked.

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

[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.