React-diagrams invisible

In general , the wrapper element (div for example) should have those css properties.

display:grid;
height: 100vh;
min-height: 100%;
width: 100vw;

You need to set a explicit height for the widget. Something like:

.srd-demo-canvas {
    height: 100vh;
}

.srd-demo-canvas {
    height: 100vh;
    background-color: rgb(60,60,60)
}

Setting the background-color in addition to the height helped me see the links against the white background that Chrome gave me by default.

If you want the grid that the demos show, then install sass and:

.srd-demo-canvas{
  height: 100%;
  min-height: 300px;
  background-color: rgb(60,60,60) !important;
  $color: rgba(white, .05);
  background-image:
    linear-gradient(0deg,
      transparent 24%,
      $color 25%,
      $color 26%,
      transparent 27%,
      transparent 74%,
      $color 75%,
      $color 76%,
      transparent 77%,
      transparent),
    linear-gradient(90deg,
      transparent 24%,
      $color 25%,
      $color 26%,
      transparent 27%,
      transparent 74%,
      $color 75%,
      $color 76%,
      transparent 77%,
      transparent);
  background-size:50px 50px;

  .pointui{
    fill: rgba(white,0.5);
  }

}

I tried following the suggested fixes but nothing worked for me.

Here's what really fixed the issue for both the nodes and the elements not showing properly.

I removed the importing of the storm-react-diagrams/dist/style.min.css

and instead, I created a custom CSS file which is the above file with the following modifications (You can find it under "node_modules/storm-react-diagrams/dist/" style.min.css):

.srd-diagram{position:unset;flex-grow:1;display:flex;cursor:move;overflow:visible}

(position to unset and overflow to visible)

.srd-link-layer{position:unset; ...}

(position to unset)