Diagram Does Not Display

[MichaelLant]

I have just started using the diagram component and I having difficulty with getting it display a diagram. I have copied the Getting Started code into the Blazor control that I am using to display the diagram. The code runs and in the debugger, I can see Nodes and Ports being created. I have the DiagramCanvas control in the layout section.

<CascadingValue Name="DiagramManager" Value="DiagramManager">
    <DiagramCanvas></DiagramCanvas>
</CascadingValue>

There is some guidance in the Getting Started page that states

but there is no code example to demonstrate what this actually means. I suspect that this is the source of my problems, but I don't know how to address it.

Hoping you can help...

BTW... It looks like the Getting Started page is outdated. Some things appear to have changed since it was written:

1. private DiagramManager DiagramManager { get; private set; } The code will not compile if the setter is private
2. The casing of the PortAlignment properties seems to have changed from upper case to Title case

   
   private NodeModel NewNode(double x, double y)
   {
   var node = new NodeModel(new Point(x, y));
   node.AddPort(PortAlignment.BOTTOM);
   node.AddPort(PortAlignment.TOP);
   node.AddPort(PortAlignment.LEFT);
   node.AddPort(PortAlignment.RIGHT);
   return node;
   }

[stefanloerwald]

Hi @MichaelLant,

I'm suspecting you are actually using a different library, namely Z.Blazor.Diagrams. The corresponding repo is https://github.com/zHaytam/Blazor.Diagrams. I suggest opening an issue there, or switching to our library to get a different set of features & issues ;-)

Regarding the DiagramCanvas size issue, this is what you can do:

1. Inspect the page with the browser dev tools
2. Using the "Elements" tab, find the div that represents the diagram.
3. Now the parent of that div must have a non-zero height. Try setting the height of that parent to 200px and see if your diagram now appears
4. If it does, simply find a CSS setting for that parent div that's appropriate to your use case. Note that height: 100% on the parent might not work for the exact same reason it doesn't work for the diagram: The parent of that parent might not have an explicit height. I usually work around this CSS madness by setting the root element to a known-good value of 100vh (view heights) and then work with percentages.

[MichaelLant]

Thanks for the quick response! I will try tonight to get it working.

[MichaelLant]

Thanks for your help. You are correct, I had the Z.Blazor.Diagrams installed. I am investigating both components and I had mixed up the repos. Your guidance, however, solve the problem with Z.Blazor.Diagrams.

The evaluation continues.

Thanks!