TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Ask HN: How do you build diagrams for the web?

1 点作者 scythmic_waves超过 1 年前
Do you use SVG? Canvas? Something else? If so, why? And what&#x27;s your process?<p>When explaining a technical topic, I&#x27;ve sometimes found myself wanting to make a visual aid of some sort. But there seems to be a huge landscape of tools and I don&#x27;t know what I should invest in learning.<p>Thanks in advance for any advice!

6 条评论

sargstuff超过 1 年前
Examples based on expected environement generating visuals from &#x2F; presenting visuals:<p>a) interactive [2i] &amp; [2iii] &#x2F; non-interactive<p>b) generating data for visuals via: sketches by hand[0], gui&#x2F;command line[1], via database&#x2F;spreadsheet&#x2F;ide[2]<p>-----<p>[0] i) : <a href="https:&#x2F;&#x2F;www.skillshare.com&#x2F;en&#x2F;blog&#x2F;how-to-digitize-a-sketch-with-adobe-illustrator&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.skillshare.com&#x2F;en&#x2F;blog&#x2F;how-to-digitize-a-sketch-...</a><p><pre><code> ii) : https:&#x2F;&#x2F;towardsdatascience.com&#x2F;how-to-convert-any-text-into-a-graph-of-concepts-110844f22a1a iii) : https:&#x2F;&#x2F;zapier.com&#x2F;blog&#x2F;best-wireframe-tools&#x2F; </code></pre> **<p>[1] i) overleaf : <a href="https:&#x2F;&#x2F;www.overleaf.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.overleaf.com&#x2F;</a><p><pre><code> ii) tiz and pgf packages : https:&#x2F;&#x2F;tikz.dev&#x2F; &#x2F; https:&#x2F;&#x2F;texample.net&#x2F;tikz&#x2F;examples&#x2F;area&#x2F;physics&#x2F; iii) ggplot : https:&#x2F;&#x2F;ggplot2.tidyverse.org&#x2F; iv) gnuplot : http:&#x2F;&#x2F;gnuplot.info&#x2F; </code></pre> **<p>[2] i) jupyter &#x2F; jupyterlab: <a href="https:&#x2F;&#x2F;jupyter.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;jupyter.org&#x2F;</a><p><pre><code> ii) impress : https:&#x2F;&#x2F;wiki.openoffice.org&#x2F;wiki&#x2F;Documentation&#x2F;OOo3_User_Guides&#x2F;Impress_Guide&#x2F;Introducing_Impress iii) graphana : https:&#x2F;&#x2F;medium.com&#x2F;analytics-vidhya&#x2F;grafana-with-postgresql-data-visualization-with-open-source-tool-36f5150fa290</code></pre>
sargstuff超过 1 年前
Walk through of various tools a physics class instructor used per different presenation requirements. <a href="https:&#x2F;&#x2F;opensource.com&#x2F;article&#x2F;20&#x2F;1&#x2F;teach-physics-open-source" rel="nofollow">https:&#x2F;&#x2F;opensource.com&#x2F;article&#x2F;20&#x2F;1&#x2F;teach-physics-open-sourc...</a>
sargstuff超过 1 年前
Online web based (no install mess):<p>Mathcha editor : <a href="https:&#x2F;&#x2F;www.mathcha.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.mathcha.io&#x2F;</a> can cut&#x2F;paste tiz examples to use as starting template(s)<p>Asmptote : <a href="https:&#x2F;&#x2F;asymptote.sourceforge.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;asymptote.sourceforge.io&#x2F;</a><p>WolframAlpha : <a href="https:&#x2F;&#x2F;www.wolframalpha.com&#x2F;input&#x2F;?i=plot+2x%2B3y-5z%3D7" rel="nofollow">https:&#x2F;&#x2F;www.wolframalpha.com&#x2F;input&#x2F;?i=plot+2x%2B3y-5z%3D7</a><p>GeoGebra : <a href="https:&#x2F;&#x2F;www.geogebra.org&#x2F;classic&#x2F;3d" rel="nofollow">https:&#x2F;&#x2F;www.geogebra.org&#x2F;classic&#x2F;3d</a><p>CPM 3D Plotter : <a href="https:&#x2F;&#x2F;technology.cpm.org&#x2F;general&#x2F;3dgraph&#x2F;" rel="nofollow">https:&#x2F;&#x2F;technology.cpm.org&#x2F;general&#x2F;3dgraph&#x2F;</a>
scythmic_waves超过 1 年前
Additional context: for a flavor of what I have in mind, you can glance at the wiki page for vector spaces [0]. E.g. [1].<p>[0]: <a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Vector_space" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Vector_space</a><p>[1]: <a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Vector_space#&#x2F;media&#x2F;File:Determinant_parallelepiped.svg" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Vector_space#&#x2F;media&#x2F;File:Deter...</a>
cvalka超过 1 年前
<a href="https:&#x2F;&#x2F;d2lang.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;d2lang.com&#x2F;</a>
评论 #38846731 未加载
billconan超过 1 年前
Are you asking about the technology to build diagram on web? or what tools to use for creating diagrams?<p>Because SVG and canvas are technologies, not tools. You then said your intention is to explain technical topics?
评论 #38846592 未加载