Mermaid ダイアグラムの読み込み

MermaidJS FlexDiagram renders diagrams from MermaidJS text syntax.

MermaidJS is a text-based diagramming language that defines diagrams using structured text. FlexDiagram parses the MermaidJS input and generates the corresponding visual diagram.

This approach is suitable for:

Rapid diagram creation
Text-based diagram definitions
Importing existing MermaidJS diagrams

FlexDiagram supports basic MermaidJS flowchart features. Advanced MermaidJS features may not be supported.

Create MermaidJS FlexDiagram

1. Create MermaidJS Text File

Create a text file, such as pizza.txt, inside a Resources folder and add MermaidJS flowchart syntax.

Text	コードのコピー
flowchart TD A((Start 🍽️)) --> B[Gather Ingredients 🍅🧀🍞] B --> C[Prepare Dough 🍞] C --> D[Add Sauce 🍅] D --> E{Choose Toppings 🤔} E -->\|Cheese 🧀\| F[Add Cheese 🧀] E -->\|Veggies 🥦🍄\| G[Add Vegetables 🥦🍄] E -->\|Meat 🍖\| H[Add Meat 🍖] F --> I[Bake in Oven 🔥] G --> I H --> I I --> J[Slice & Enjoy 😋🍕] J --> K((End ✅))

Text

コードのコピー

flowchart TD
    A((Start 🍽️)) --> B[Gather Ingredients 🍅🧀🍞]
    B --> C[Prepare Dough 🍞]
    C --> D[Add Sauce 🍅]
    D --> E{Choose Toppings 🤔}
    E -->|Cheese 🧀| F[Add Cheese 🧀]
    E -->|Veggies 🥦🍄| G[Add Vegetables 🥦🍄]
    E -->|Meat 🍖| H[Add Meat 🍖]
    F --> I[Bake in Oven 🔥]
    G --> I
    H --> I
    I --> J[Slice & Enjoy 😋🍕]
    J --> K((End ✅))

2. Add FlexDiagram in XAML

XAML	コードのコピー
<Window x:Class="FlexDiagramWPF_MermaidJS.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" Title="MainWindow" Height="450" Width="800"> <Grid> <c1:FlexDiagram x:Name="diagram" ScaleMode="ScaleToFit"/> </Grid> </Window>

XAML

コードのコピー

<Window x:Class="FlexDiagramWPF_MermaidJS.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="450"
        Width="800">
  <Grid>
    <c1:FlexDiagram x:Name="diagram"
                    ScaleMode="ScaleToFit"/>
  </Grid>
</Window>

3. Load MermaidJS Graph

Call the LoadMermaidGraph method and reference the C1.Diagram.Parser namespace.

C#	コードのコピー
var text = GetResourceText("pizza.txt");// Load Mermaid.js graph into FlexDiagram diagram.LoadMermaidGraph(text);

Load MermaidJS from String

MermaidJS content can also be loaded directly from a string instead of a file.

C#	コードのコピー
string mermaidText = @" flowchart LR A[Start] --> B[Process] B --> C[End] "; diagram.LoadMermaidGraph(mermaidText);

MermaidJS FlexDiagram Sample

C#	コードのコピー
using C1.Diagram.Parser; using C1.WPF.Diagram; using System.IO; using System.Reflection; using System.Windows; namespace FlexDiagramWPF_MermaidJS { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); LoadMermaidDiagram(); } private void LoadMermaidDiagram() { var text = GetResourceText("pizza.txt"); diagram.LoadMermaidGraph(text); } private string GetResourceText(string fileName) { var asm = Assembly.GetExecutingAssembly(); var resourceName = $"{asm.GetName().Name}.Resources.{fileName}"; using (var stream = asm.GetManifestResourceStream(resourceName)) using (var reader = new StreamReader(stream)) { return reader.ReadToEnd(); } } } }

コードのコピー

using C1.Diagram.Parser;
using C1.WPF.Diagram;
using System.IO;
using System.Reflection;
using System.Windows;
namespace FlexDiagramWPF_MermaidJS
{
  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      InitializeComponent();
      LoadMermaidDiagram();
    }
    private void LoadMermaidDiagram()
    {
      var text = GetResourceText("pizza.txt");
      diagram.LoadMermaidGraph(text);
    }
    private string GetResourceText(string fileName)
    {
      var asm = Assembly.GetExecutingAssembly();
      var resourceName =
        $"{asm.GetName().Name}.Resources.{fileName}";
      using (var stream =
        asm.GetManifestResourceStream(resourceName))
      using (var reader = new StreamReader(stream))
      {
        return reader.ReadToEnd();
      }
    }
  }
}