visualize-ms-arch-step-2.dot

digraph architecture {
  rankdir=LR;

  // Storage - #303F9F (dark blue)
  node[fillcolor="#303F9F" style="filled" fontcolor="white"];
  database[label="DB"]; cache[label="Redis"];
  
  // Client-side Apps - #FFEB3B (yellow)
  node[fillcolor="#FFEB3B" style="filled" fontcolor="black"];
  front_end[label="Front-end App"]; extension[label="Browser Extension"];
  
  // Microservices - #C8E6C9 (light green)
  node[fillcolor="#C8E6C9" style="filled" fontcolor="black"];
  photos_ms[label="Photos MS"]; chats_ms[label="Chats MS"]; friends_ms[label="Friends MS"];
  
  // API Gateways - #FFCCBC (light orange)
  node[fillcolor="#FFCCBC" style="filled" fontcolor="black"];
  auth_api[label="Auth API"]; my_app_api[label="Main API"];
  
  // 3rd-party APIs - #CFD8DC (light grey)
  node[fillcolor="#CFD8DC" style="filled" fontcolor="black"];
  facebook_api[label="Facebook API"];
  
  subgraph client_side_apps {
      front_end -> {auth_api, my_app_api};
      extension -> {auth_api, my_app_api};
      
      {rank=same; front_end, extension, auth_api};
  }
  
  subgraph api_gateways {
      my_app_api -> {photos_ms, chats_ms, friends_ms};
  }
  
  subgraph microservices {
      photos_ms -> {database};
      chats_ms -> {database, cache};
      friends_ms -> {database, facebook_api};
  }
}

See the article here:
https://articles.microservices.com/an-alternative-way-of-visualizing-microservice-architecture-837cbee575c1

Any full implementation demo code example? 😃