Question: Is there any way I can add an image in the center of an Atomic shape which has 3 in-ports and 3 out-ports?

I don't want a solution exclusively for an Atomic shape. It could be a custom shape but in case of a custom shape I want it to have in-ports and out-ports.

My so far code (without adding this image) is:

```
new joint.shapes.devs.Atomic({
            size: { width: 4, height: 3 },
            inPorts: ['in1','in2','in3'],
            outPorts: ['out1','out2','out3'],
            attrs: {
        rect: { fill: '#ffffff', rx: 2, ry: 2 },
 text: { text: 'Workitem', fill: '#000000', 'font-size': 10, stroke: '#000000', 'stroke-width': 0 },
        '.inPorts circle': { fill: '#dddddd', opacity: 0.9 },
            '.outPorts circle': { fill: '#dddddd', opacity: 0.9 },
        '.inPorts text, .outPorts text': { 'font-size': 9 }
            }
        })

```

Answer: 
The simplest solution is you can replace the new line characters with `<br>`.

Try

```
text.split('\n').join('\n<br>\n')

```

then you are done.
Ok finally this code snippet worked for me - 

```
template = template.replace(/\n/gi, "</p></br/>")
template = template.replace(/<\/p>/gi, "</p><p></br/>")

```

This was a lot of hit and trial but eventually it worked.