mermaid でクラス図を描いてみる | すねいるＥＴロボコン日記

7年前に『モデルとは基本的に図のことである』というタイトルで "DOT言語" や "PlantUML" でUMLのクラス図を描く方法を紹介しました。先日、GitHubが対応を発表して盛り上がっている "mermaid" を使ってUMLを描いてみたので紹介します。

mermaidのコード

classDiagram
    LightSensor <|-- ColorSensor
    LightSensor <|-- RedSensor
    class LightSensor {
        - char port
        + void on()
        + void off()
    }
    class ColorSensor {
        + unsigned char getRed()
        + unsigned char getGreen()
        + unsigned char getBlue()
    }
    class RedSensor {
        + unsigned char getLight()
    }

classDiagram

LightSensor <|-- ColorSensor

LightSensor <|-- RedSensor

class LightSensor {

- char port

+ void on()

+ void off()

}

class ColorSensor {

+ unsigned char getRed()

+ unsigned char getGreen()

+ unsigned char getBlue()

}

class RedSensor {

+ unsigned char getLight()

}

コードから生成した画像(png)

クラス図