Add matplotlib style configuration for circuit drawing

doc/_static/draw_mpl/draw_mpl_examples.py

@@ -71,23 +71,32 @@ def postprocessing(circuit):
     plt.close()
 
 def rcparams(circuit):
-    plt.rcParams['patch.facecolor'] = 'white'
-    plt.rcParams['patch.edgecolor'] = 'black'
-    plt.rcParams['patch.linewidth'] = 2
+    plt.rcParams['patch.facecolor'] = 'mistyrose'
+    plt.rcParams['patch.edgecolor'] = 'maroon'
+    plt.rcParams['text.color'] = 'maroon'
+    plt.rcParams['font.weight'] = 'bold'
+    plt.rcParams['patch.linewidth'] = 4
     plt.rcParams['patch.force_edgecolor'] = True
-    plt.rcParams['lines.color'] = 'black'
+    plt.rcParams['lines.color'] = 'indigo'
+    plt.rcParams['lines.linewidth'] = 5
+    plt.rcParams['figure.facecolor'] = 'ghostwhite'
 
-    fig, ax = draw_mpl(circuit)(1.2345,1.2345)
+
+    fig, ax = qml.draw_mpl(circuit)(1.2345,1.2345)
 
     plt.savefig(folder / "rcparams.png")
     plt.close()
     plt.style.use('default')
 
-def Solarize_Light2(circuit):
-    with plt.style.context("Solarize_Light2"):
-        fig, ax = draw_mpl(circuit)(1.2345,1.2345)
-        plt.savefig(folder / "Solarize_Light2.png")
-        plt.close()
+def use_style(circuit):
+
+    qml.drawer.use_style('black_white')
+
+    fig, ax = qml.draw_mpl(circuit)(1.2345,1.2345)
+
+    plt.savefig(folder / "black_white_style.png")
+    plt.close()
+    plt.style.use('default')
 
 def wires_labels(circuit):
     fig, ax = draw_mpl(circuit, wire_options={'color':'black', 'linewidth': 5},
@@ -114,6 +123,6 @@ def circuit(x, z):
     wire_order(circuit)
     show_all_wires(circuit)
     postprocessing(circuit)
+    use_style(circuit)
     rcparams(circuit)
-    Solarize_Light2(circuit)
     wires_labels(circuit)

doc/_static/drawer/mpldrawer_examples.py

@@ -20,7 +20,7 @@
 import pathlib
 import matplotlib.pyplot as plt
 
-from pennylane.drawer import MPLDrawer
+from pennylane.drawer import MPLDrawer, use_style
 
 folder = pathlib.Path(__file__).parent
 
@@ -123,7 +123,7 @@ def measure(savefile="measure.png"):
     plt.close()
 
 def integration(style="default", savefile="example_basic.png"):
-    plt.style.use(style)
+    use_style(style)
     drawer = MPLDrawer(n_wires=5, n_layers=6)
 
     drawer.label(["0", "a", r"$|\Psi\rangle$", r"$|\theta\rangle$", "aux"])
@@ -152,23 +152,28 @@ def integration(style="default", savefile="example_basic.png"):
 
 
 def integration_rcParams(savefile="example_rcParams.png"):
-    plt.rcParams["patch.facecolor"] = "white"
-    plt.rcParams["patch.edgecolor"] = "black"
-    plt.rcParams["patch.linewidth"] = 2
-    plt.rcParams["patch.force_edgecolor"] = True
-
-    plt.rcParams["lines.color"] = "black"
+    plt.rcParams['patch.facecolor'] = 'mistyrose'
+    plt.rcParams['patch.edgecolor'] = 'maroon'
+    plt.rcParams['text.color'] = 'maroon'
+    plt.rcParams['font.weight'] = 'bold'
+    plt.rcParams['patch.linewidth'] = 4
+    plt.rcParams['patch.force_edgecolor'] = True
+    plt.rcParams['lines.color'] = 'indigo'
+    plt.rcParams['lines.linewidth'] = 5
+    plt.rcParams['figure.facecolor'] = 'ghostwhite'
 
     drawer = MPLDrawer(n_wires=5, n_layers=5)
 
+    drawer = MPLDrawer(n_wires=5, n_layers=6)
+
     drawer.label(["0", "a", r"$|\Psi\rangle$", r"$|\theta\rangle$", "aux"])
 
     drawer.box_gate(0, [0, 1, 2, 3, 4], "Entangling Layers")
-    drawer.box_gate(1, [0, 1], "U(θ)")
+    drawer.box_gate(1, [0, 2, 3], "U(θ)")
 
     drawer.box_gate(1, 4, "Z")
 
-    drawer.SWAP(1, (2, 3))
+    drawer.SWAP(2, (3,4))
     drawer.CNOT(2, (0, 2))
 
     drawer.ctrl(3, [1, 3], control_values=[True, False])
@@ -241,6 +246,6 @@ def float_layer(savefile="float_layer.png"):
     measure()
     integration()
     float_layer()
-    integration(style="Solarize_Light2", savefile="example_Solarize_Light2.png")
+    integration(style="black_white", savefile="black_white_style.png")
     integration_rcParams()
     integration_formatted()

doc/_static/style/style_examples.py

@@ -0,0 +1,52 @@
+# Copyright 2018-2021 Xanadu Quantum Technologies Inc.
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+"""
+This file automatically generates and saves a series of example pictures for the
+circuit drawer. This will be useful during early stages when the project is still
+undergoing cosmetic changes.
+"""
+
+import pathlib
+import matplotlib.pyplot as plt
+
+import pennylane as qml
+import matplotlib.pyplot as plt
+
+folder = pathlib.Path(__file__).parent
+
+def make_imag(circuit, style):
+    qml.drawer.use_style(style)
+
+    fig, ax = qml.draw_mpl(circuit)(1.2345,1.2345)
+    fig.suptitle(style, fontsize='xx-large')
+
+    plt.savefig(folder / (style + "_style.png"))
+    plt.close()
+    qml.drawer.use_style('default')
+
+if __name__ == "__main__":
+
+    dev = qml.device('lightning.qubit', wires=(0,1,2,3))
+    @qml.qnode(dev)
+    def circuit(x, z):
+        qml.QFT(wires=(0,1,2,3))
+        qml.Toffoli(wires=(0,1,2))
+        qml.CSWAP(wires=(0,2,3))
+        qml.RX(x, wires=0)
+        qml.CRZ(z, wires=(3,0))
+        return qml.expval(qml.PauliZ(0))
+
+    for style in qml.drawer.available_styles():
+        make_imag(circuit, style)
+

doc/_static/tape_mpl/tape_mpl_examples.py

@@ -59,27 +59,34 @@ def show_all_wires(tape):
     plt.savefig(folder / "show_all_wires.png")
     plt.close()
 
-def mpl_style(tape):
-
-    with plt.style.context("Solarize_Light2"):
-        fig, ax = tape_mpl(tape)
-        plt.savefig(folder/"Solarize_Light2.png")
-        plt.close()
-
 def rcparams(tape):
 
-    plt.rcParams['patch.facecolor'] = 'white'
-    plt.rcParams['patch.edgecolor'] = 'black'
-    plt.rcParams['patch.linewidth'] = 2
+    plt.rcParams['patch.facecolor'] = 'mistyrose'
+    plt.rcParams['patch.edgecolor'] = 'maroon'
+    plt.rcParams['text.color'] = 'maroon'
+    plt.rcParams['font.weight'] = 'bold'
+    plt.rcParams['patch.linewidth'] = 4
     plt.rcParams['patch.force_edgecolor'] = True
-    plt.rcParams['lines.color'] = 'black'
+    plt.rcParams['lines.color'] = 'indigo'
+    plt.rcParams['lines.linewidth'] = 5
+    plt.rcParams['figure.facecolor'] = 'ghostwhite'
 
     fig, ax = tape_mpl(tape)
 
     plt.savefig(folder / "rcparams.png")
     plt.close()
     plt.style.use('default')
 
+def use_style(tape):
+
+    qml.drawer.use_style('black_white')
+
+    fig, ax = tape_mpl(tape)
+
+    plt.savefig(folder / "black_white_style.png")
+    plt.close()
+    plt.style.use('default')
+
 def wires_and_labels(tape):
 
     fig, ax = tape_mpl(tape, wire_options={'color':'black', 'linewidth': 5},
@@ -118,7 +125,7 @@ def postprocessing(tape):
     decimals()
     wire_order(tape)
     show_all_wires(tape)
-    mpl_style(tape)
+    use_style(tape)
     rcparams(tape)
     wires_and_labels(tape)
     postprocessing(tape)

doc/code/qml_drawer.rst

@@ -1,14 +1,63 @@
 qml.drawer
 ==========
 
+The ``drawer`` module contains the code for generating visuals
+of circuits. 
+
 .. currentmodule:: pennylane.drawer
 
-.. warning::
+Styling Matplotlib Circuit Graphics
+-----------------------------------
+
+The ``drawer`` module provides two functions for modifying the style of matplotlib
+graphics, such as those generated by ``qml.draw_mpl``. The ``qml.drawer.use_style``
+function modifies the ``plt.rcParams`` global styling variable.  Any styling can
+be reset with ``qml.drawer.use_style('default')`` or ``plt.style.use('default')``.
+
+.. autosummary::
+    :toctree: api
+
+    available_styles
+    use_style
+
+The following images are generated via the code:
+
+.. code-block:: python
+
+    @qml.qnode(qml.device('lightning.qubit', wires=(0,1,2,3)))
+    def circuit(x, z):
+        qml.QFT(wires=(0,1,2,3))
+        qml.Toffoli(wires=(0,1,2))
+        qml.CSWAP(wires=(0,2,3))
+        qml.RX(x, wires=0)
+        qml.CRZ(z, wires=(3,0))
+        return qml.expval(qml.PauliZ(0))
+
+    qml.drawer.use_style(style)
+    fig, ax = qml.draw_mpl(circuit)(1.2345, 1.2345)
+
+Currently Available Styles
+^^^^^^^^^^^^^^^^^^^^^^^^^^
+.. |bws| image:: ../_static/style/black_white_style.png
+    :width: 100%
+
+.. |bwd| image:: ../_static/style/black_white_dark_style.png
+    :width: 100%
+
+.. |def| image:: ../_static/style/default_style.png
+    :width: 100%
+
++-----+-----+-----+
++|bws|+|bwd|+|def|+
++-----+-----+-----+
+
 
-    Unless you are a PennyLane or plugin developer, you likely do not need
-    to use these classes directly.
+Developer Methods
+-----------------
 
 .. automodapi:: pennylane.drawer
     :no-heading:
     :no-inheritance-diagram:
-    :no-inherited-members:
+    :no-inherited-members:
+    :skip: available_styles
+    :skip: use_style

doc/releases/changelog-dev.md

@@ -152,6 +152,7 @@
 
 * PennyLane now supports drawing a QNode with matplotlib!
   [(#1803)](https://github.com/PennyLaneAI/pennylane/pull/1803)
+  [(#1811)](https://github.com/PennyLaneAI/pennylane/pull/1811)
   [(#1954)](https://github.com/PennyLaneAI/pennylane/pull/1954)
 
   ```python
@@ -164,11 +165,13 @@
       qml.RX(x, wires=0)
       qml.CRZ(z, wires=(3,0))
       return qml.expval(qml.PauliZ(0))
+
+  qml.drawer.use_style('black_white')
   fig, ax = qml.draw_mpl(circuit)(1.2345, 1.2345)
   fig.show()
   ```
 
-  <img src="https://pennylane.readthedocs.io/en/latest/_static/draw_mpl_qnode/main_example.png" width=70%/>
+  <img src="https://pennylane.readthedocs.io/en/latest/_static/draw_mpl/black_white_style.png" width=70%/>
 
 * It is now possible to use TensorFlow's [AutoGraph
   mode](https://www.tensorflow.org/guide/function) with QNodes on all devices and with arbitrary

pennylane/drawer/__init__.py

@@ -12,8 +12,7 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 """
-This subpackage provides the circuit drawing functionality used to render QNodes
-as circuit diagrams.
+This module provides the circuit drawing functionality used to display circuits visually.
 
 .. currentmodule:: pennylane.circuit_drawer
 .. autosummary::
@@ -27,3 +26,4 @@
 from .mpldrawer import MPLDrawer
 from .drawable_layers import drawable_layers, drawable_grid
 from .utils import convert_wire_order
+from .style import available_styles, use_style

pennylane/drawer/mpldrawer.py

@@ -114,33 +114,37 @@ class MPLDrawer:
 
     **Formatting**
 
-    You can globally control the style with ``plt.rcParams`` and styles, see the
-    `matplotlib docs <https://matplotlib.org/stable/tutorials/introductory/customizing.html>`_ .
-    If we customize ``plt.rcParams`` before executing our example function, we get a
-    different style:
+    PennyLane has inbuilt styles for controlling the appearance of the circuit drawings.
+    All available styles can be determined by evaluating ``qml.drawer.available_styles()``.
+    Any available string can then be passed to ``qml.drawer.use_style``.
 
     .. code-block:: python
 
-        plt.rcParams['patch.facecolor'] = 'white'
-        plt.rcParams['patch.edgecolor'] = 'black'
-        plt.rcParams['patch.linewidth'] = 2
-        plt.rcParams['patch.force_edgecolor'] = True
-        plt.rcParams['lines.color'] = 'black'
+        qml.drawer.use_style('black_white')
 
-    .. figure:: ../../_static/drawer/example_rcParams.png
+    .. figure:: ../../_static/drawer/black_white_style.png
             :align: center
             :width: 60%
             :target: javascript:void(0);
 
-    Instead of manually customizing everything, you can choose one of
-    the provided styles. You can see available styles with ``plt.style.available``.
-    We can set the ``'Solarize_Light2'`` style with the same graph as drawn above and instead get:
+    You can also control the appearance with matplotlib's provided tools, see the
+    `matplotlib docs <https://matplotlib.org/stable/tutorials/introductory/customizing.html>`_ .
+    For example, we can customize ``plt.rcParams``:
 
     .. code-block:: python
 
-        plt.style.use('Solarize_Light2')
+        plt.rcParams['patch.facecolor'] = 'mistyrose'
+        plt.rcParams['patch.edgecolor'] = 'maroon'
+        plt.rcParams['text.color'] = 'maroon'
+        plt.rcParams['font.weight'] = 'bold'
+        plt.rcParams['patch.linewidth'] = 4
+        plt.rcParams['patch.force_edgecolor'] = True
+        plt.rcParams['lines.color'] = 'indigo'
+        plt.rcParams['lines.linewidth'] = 5
+        plt.rcParams['figure.facecolor'] = 'ghostwhite'
+
 
-    .. figure:: ../../_static/drawer/example_Solarize_Light2.png
+    .. figure:: ../../_static/drawer/example_rcParams.png
             :align: center
             :width: 60%
             :target: javascript:void(0);
@@ -151,7 +155,6 @@ class MPLDrawer:
     to the dictionary controlling how to format a rectangle. For the control-type gates ``CNOT`` and
     ``ctrl`` the options dictionary can only contain ``'linewidth'``, ``'color'``, or ``'zorder'`` keys.
 
-
     This example demonstrates the different ways you can format the individual elements:
 
     .. code-block:: python