Add component diagram

[luca-script]

Proposal

A component diagram represents the components within a computer system

Specifically; we can say it is grouped into "domains" and "devices"
A domain is say; a CPU, chipset, BMC or other device with downstream connections
A device is say; a port, a slot, or a device class like a HID

This is unique from a graph because component diagrams can be (But sadly not demonstrated in this example) grouped into domains
Where multiple of these graphs can be put into one
So we can have subgraphs in subgraphs in subgraphs

Use Cases

• Listing components in a computer system
• Describing the relations between points on a PCB, and where traces go

Screenshots

Here are some examples of such diagrams in the wild
These don't show all the functionality I want, but are to get an idea of the kind of diagram

Syntax

component-beta
  direction TB # Go from top to bottom
  domain CPU # A domain has many ports
    group PCIC1: PCIe controller \#1 # Groups allow grouping of related functionality
    # Hosts can connect to a slot or a device, they can also connect to a "mux"
      host PCI_1: PCIe Root Port \#1 # TODO: Maybe syntax for specific pins within a host?
    end
    note right of PCI_1: Supports lane inversion
  end
  slot PCIe1: PCIe 3.0 x16/x8 slot, 75W # A slot is a way to show a slot that a device can be connected to
  slot PCIe2: PCIe 3.0 x8 slot, 75W
  device GPU: Your graphics card # A device has one port
  mux PCIPrim: This is a label for our mux # A mux takes an input thing, and distributes it in multiple configurations to other things
  CPU.PCIC1.PCI_1 --> PCIPrim
  PCIPrim --1"x16"-> PCIe1
  PCIPrim --2"x8"-> PCIe1: Link is reduced to 8 lanes # We can add a label to the side of the arrow instead of inside/right on top of the arrow by using standard label syntax
  PCIPrim --2"x8"-> PCIe2 # We can add a number before the label to indicate multiple different exclusive configurations
  PCIe1 --> GPU # On the topic of arrows, we can do arrows (-->), thick arrows (==>), lines (---), dotted lines (-.-), striped lines (-=-), thick lines (===), bidirectional lines (<-> or <=>), inverted lines (>=<, >-<, >--) and blocked lines (-|-, -|->, we can also specify the block to be before or after the label)
  
  flow CPU, GPU # This would be syntax to tell the renderer to put these on top of eachother or at least as close as possible

Implementation

This is a proposal which I'd love to see built into mermaid by the wonderful community.

[jgreywolf]

Duplicate of #1462