Really Struggling

Hello all, First and foremost, I’m a complete n00b to react and webpack. But I’d really like to use react-diagrams in my project, but can’t seem to get it to render properly.

Here is what I’ve done so far:

1. cd into my project folder
2. ran npm install --save storm-react-diagrams
3. Created a new page on my site and added the following code to it:

import React, { Component } from 'react';

import {
	DiagramEngine,
	DiagramModel,
	DefaultNodeModel,
	LinkModel,
  DefaultPortModel,
  DiagramWidget,
  DefaultLinkModel
} from "storm-react-diagrams";


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

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

//3-A) create a default node
var node1 = new DefaultNodeModel("Node 1", "rgb(0,192,255)");
var port1 = node1.addPort(new DefaultPortModel(false, "out-1", "Out"));
node1.x = 100;
node1.y = 100;

//3-B) create another default node
var node2 = new DefaultNodeModel("Node 2", "rgb(192,255,0)");
var port2 = node2.addPort(new DefaultPortModel(true, "in-1", "IN"));
node2.x = 400;
node2.y = 100;

//3-C) link the 2 nodes together
var link1 = new LinkModel();
link1.setSourcePort(port1);
link1.setTargetPort(port2);

//4) add the models to the root graph
model.addNode(node1);
model.addNode(node2);
model.addLink(link1);

//5) load model into engine
engine.setDiagramModel(model);

class SandboxPage extends Component {
  render() {
    return (
      <div>
        <DiagramWidget diagramEngine={engine} />
      </div>
    );
  }
}

export default SandboxPage;

But the page renders like this:

I pretty much copied the code from the simple demo example, but obviously, something is wrong.

Any help would be appreciated.

[mahesh-gorla]

import “@projectstorm/react-diagrams/dist/style.min.css”; is not working for the latest update, can anyone help me on it.

[matt-erhart]

// in './diagram.css';
.srd-diagram {
    height: 100vh;
}

then

import 'storm-react-diagrams/dist/style.min.css';
import './diagram.css';

but then the links only show on hover.