Image rendering

edit

Meziantou.Framework.Imaging.VectorGraphics draws the diagrams with Meziantou.Framework.Imaging, as it draws the charts: a diagram is an ISceneSource.

dotnet package add Meziantou.Framework.Imaging.VectorGraphics

var flowchart = new FlowchartDiagram { Direction = DiagramDirection.LeftToRight };
flowchart.AddEdge("draft", "review");
flowchart.AddEdge("review", "publish");

// Meziantou.Framework.Imaging.VectorGraphics draws any diagram: image.Save("flow.png")
using var image = flowchart.ToImage(new SceneImageOptions { Scale = 2 });

The diagram is laid out with the fonts that draw the image, Liberation Sans by default, so its texts fit their shapes. See image rendering for the options and the fonts.

Draw on a canvas

DrawScene draws a diagram on an existing image, where the transform, the clip and the layers of the canvas apply. The size of a diagram depends on its texts: MeasureScene lays it out with the same fonts and gives the rectangle it covers, to place it:

var flowchart = new FlowchartDiagram();
flowchart.AddEdge("start", "end");

// The size depends on the texts: measure the diagram to place it
var size = SceneImageRenderer.MeasureScene(flowchart);
using var report = new Image<Rgba32>(400, 400, Colors.White); // or Image.Load<Rgba32>("report.png")
var position = new PointD(report.Width - size.Width - 10, 10);
report.Draw(canvas => canvas.DrawScene(flowchart, position));

PDF

Meziantou.Framework.Pdf.VectorGraphics draws the same scene as a PDF document, or on a page of an existing one, as vector shapes and text: ToPdf lays the source out with the fonts that draw it. See PDF rendering.