Edit in JSFiddle

$(function() {
  var arrowPath = ['m', 370, 142, 'l', -25, 36, 13, 0, 0, 55, 24, 0, 0, -55, 13, 0, -25, -36];
  var render = new Highcharts.Renderer(
    $('#container')[0],
    600,
    660
  );

  //declare Front-End part
  var frontEnd = render.g().add();

  var FECanvas = render.rect(0, 0, 600, 360).attr({
    'fill': '#FDEADA'
  }).add(frontEnd);

  render.text('Front-End', 45, 164).attr({
    'font-size': '19px',
    'font-weight': 'bold'
  }).add(frontEnd);

  // handle FEGrah group
  var FEGrah = render.g().add(frontEnd);
  
  render.rect(240, 25, 341, 88, 2).attr({
      fill: '#fff',
      stroke: '#A09286',
      'stroke-width': '6px',
      'stroke-opacity': '0.3'
  }).add(FEGrah);

  render.rect(240, 25, 340, 86, 2).attr({
    'fill': '#4F81BD',
    'stroke': '#fff',
    'stroke-width': '4px'
  }).add(FEGrah);

  //draw chorme logo
  render.image('http://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_(2011).png', 250, 30, 75, 75).add(FEGrah);

  render.rect(353, 46, 212, 47, 2).attr({
    fill: '#A09286',
    stroke: '#A09286',
    'stroke-width': '6px',
    'stroke-opacity': '0.3'
  }).add(FEGrah);

  render.rect(353, 46, 210, 46, 2).attr({
    'fill': '#9BBB59',
    'stroke': '#fff',
    'stroke-width': '4px'
  }).add(FEGrah);

  render.text('UI Layer', 425, 75).attr({
    'font-size': '19px'
  }).css({
    'color': '#fff'
  }).add(FEGrah);

  render.text('Browser', 360, 140).attr({
    'font-size': '19px',
    'font-weight': 'bold'
  }).add(FEGrah);

  // handle FEGrah2 group
  var FEGrah2 = render.g().add(frontEnd);

  render.rect(240, 240, 341, 88, 2).attr({
    fill: '#fff',
    stroke: '#A09286',
    'stroke-width': '6px',
    'stroke-opacity': '0.3'
  }).add(FEGrah2); 

  render.rect(240, 240, 340, 86, 2).attr({
    'fill': '#4F81BD',
    'stroke': '#fff',
    'stroke-width': '4px'
  }).add(FEGrah2);

  //draw nodejs logo
  render.image('http://nodejs.org/images/logos/nodejs.png', 245, 255, 100, 55).add(FEGrah2);

  render.label('UI Layer', 353, 257).attr({
    fill: "#F79646",
    stroke: 'white',
    'stroke-width': 4,
    padding: 12,
    r: 2,
    width: 185
  }).css({
    textAlign: 'center',
    color: '#fff',
    fontSize: '19px'
  }).add(FEGrah2).shadow(true);

  //draw bottom text
  render.text('Server', 375, 354).attr({
    'font-size': 19,
    'font-weight': 'bold'
  }).add(FEGrah2);

  var FENarrow = render.g().add(frontEnd);
  var FENarrow2 = render.g().add(frontEnd); 
   
  var narrow = render.path(arrowPath).attr({
    stroke: '#EC9694',
    'stroke-width': '2',
    fill: 'pink'
  }).add(FENarrow);

  var narrow2 = render.path(arrowPath).attr({
    stroke: '#EC9694',
    'stroke-width': '2',
    fill: 'pink'
  }).add(FENarrow2);

  FENarrow2.attr({
    'transform': 'rotate(-180 397 189)'
  });

  render.text('HTTP/HTTPS', 455, 195).attr({
    'font-size': '19',
    'font-weight': 'bold'
  }).add('frontEnd');

})

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>