I’m trying out using Diagrams for including images in the web site. Let’s see if this works.

## First diagram

The following is the first diagram I tried:

```
import Diagrams.Runner
main :: IO ()
= putDiagram defaultOptions myCircle
main
myCircle :: Diagram B
= circle 1 # fc red myCircle
```

It is a circle filled with the color red in light mode. In dark mode, colors will be inverted.

The code snippet above imports the Diagrams.Runner module,
which is a custom module for this web site to generate SVG output from Diagrams.
It exports the `putDiagram`

function which does this work.

In subsequent code snippets,
I will omit the import statement and the definition of the `main`

function.

## Combining diagrams

A circle atop another:

```
example :: Diagram B
= circle 2 # lc purple `atop` circle 1 # lc green example
```

A circle and a square side by side:

```
example :: Diagram B
= circle 1 ||| square 2 example
```

A circle stacked on above a square:

```
example :: Diagram B
= circle 1 === square 2 example
```

Three rows of growing circles:

```
circles :: Diagram B
= hcat $ map circle [1..6]
circles
example :: Diagram B
= vcat $ replicate 3 circles example
```

## Aligning shapes

Circles of different sizes aligned on the top:

```
example :: Diagram B
= hrule (2 * sum sizes) === circles # centerX
example where
= hcat $ map (alignT . (`scale` circle 1)) sizes
circles = [2, 5, 4, 7, 1, 3] sizes
```

## Fractals

These diagrams are from the diagrams-contrib package.

A Koch snowflake:

```
import Diagrams.TwoD.Path.IteratedSubset
example :: Diagram B
= strokeTrail $ snowflake 5 example
```

A Sierpinski triangle:

```
import Diagrams.TwoD.Path.LSystem
example :: Diagram B
= getTurtleDiagram $ sierpinski 8 example
```

Tree figure generated with an L-system:

```
import Diagrams.TwoD.Path.LSystem
example :: Diagram B
= rotateBy 0.25 $ getTurtleDiagram $ tree4 7 example
```

## Conclusion

Yes, it works.

I am terrible at drawing images by hand. I don’t even want to draw anything by hand. So getting images declaratively generated by Diagrams whenever I need one is going to be a great help.