Get the resulting svg and pass it into a div or whatever

Default parameters to work with ...

defaultOptions =
    { fontSize = 14.0
    , lineWidth = 1.5
    , textWidth = 8.0
    , textHeight = 16.0
    , arcRadius = 4.0
    , color =
        { stroke = "#222"
        , text = "black"
        , background = "white"
        }
    , verbatim =
        { string = "\""
        , multiline = False
        , height = Nothing
        , width = Nothing
        }
    }

Get the resulting svg and pass it into a div or parse it further or do whatever ...

Identified elements can be stored for later usage and verbatim code can be exposed, so that it can be transformed into any other kind of representation.

The foreign part can be translated into anything, strings are not mandatory. This way it can also be used within your model, if those foreign elements are used to store more relevant information.

Use this function in conjunction with drawElements.

Use this to draw the result of the getElements function into an svg container. The function that translates foreign objects into Svg elements is mandatory.

general settings ...

type alias Settings =
    { fontSize : Float
    , lineWidth : Float
    , textWidth : Float
    , textHeight : Float
    , arcRadius : Float
    , color :
        { stroke : String
        , text : String
        , background : String
        }
    , verbatim :
        { string : String
        , multiline : Bool
        , height : Maybe String
        , width : Maybe String
        }
    }

textWidth and textHeight are currently ignored, the grid is always 8 × 16.

The additional verbatim.height and verbatim.width can be used to overwrite the calculated dimensions for that specific element. Otherwise the dimensions for verbatim elements are calculated on the basis of the position and dimensions of the strings within the ASCII-Art image.

This record is used to store all relevant data to draw an svg-image multiple times, without re-parsing it.

Helper for changing the color settings.

settings
|> setColors { stroke = "red", text = "green", background = "blue" }
|> getSvg [] ...

Helper for changing the color configuration.

config
|> setColorsIn { stroke = "red", text = "green", background = "blue" }
|> drawElements [] ...